'use client';

import Image from 'next/image';
import { useState, type FC } from 'react';
import { useTheme } from '@/context/ThemeContext';

interface ProjectThumbnailProps {
  image: string;
  title: string;
  priority?: boolean;
  className?: string;
}

const getDarkImagePath = (image: string) =>
  image.replace(/(\.[^./]+)$/, '-dark$1');

export const ProjectThumbnail: FC<ProjectThumbnailProps> = ({
  image,
  title,
  priority = false,
  className,
}) => {
  const { theme } = useTheme();
  const darkImage = getDarkImagePath(image);
  const [unavailableDarkImage, setUnavailableDarkImage] = useState<string | null>(
    null,
  );
  const useDarkImage = theme === 'dark' && unavailableDarkImage !== darkImage;

  return (
    <Image
      key={useDarkImage ? darkImage : image}
      src={useDarkImage ? darkImage : image}
      alt={title}
      fill
      sizes="(max-width: 650px) 100vw, (max-width: 1100px) 100vw, 360px"
      priority={priority}
      draggable={false}
      className={className}
      onError={() => {
        if (useDarkImage) setUnavailableDarkImage(darkImage);
      }}
    />
  );
};