import { motion } from 'framer-motion';
import ProgressPie from './ProgressPie';
import TouchScreenIcon from './icons/TouchScreenIcon';
import VRIcon from './icons/VRIcon';
import MobileIcon from './icons/MobileIcon';
import IProject from '../types/IProject';
import { format } from 'date-fns';

function ProjectCard({
  englishTitle,
  englishCity,
  image,
  stage = 6,
  releaseDate = format(new Date(), 'yyyy-MM-dd'),
  devices = [],
}: IProject) {
  const stagePercentage = Math.round((100 / 6) * stage);

  return (
    <motion.div
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true, margin: '-100px' }}
      transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98], delay: 0.2 }}
      className='group relative aspect-[4/3] p-4 flex items-end overflow-hidden'
    >
      <div
        className='absolute top-0 left-0 w-full h-full transition-transform duration-500 bg-center bg-no-repeat bg-cover group-hover:scale-110'
        style={{
          backgroundImage: `url(${import.meta.env.VITE_CLOUD_URL}/${image})`,
        }}
      ></div>
      <div className='absolute top-0 left-0 w-full h-full bg-gradient-card'></div>
      <div className='relative flex flex-col gap-4'>
        <div>
          <p className='text-xl font-medium 2xl:text-2xl font-gilroy'>
            {englishTitle}
          </p>
          <p className='text-xs 2xl:text-sm'>{englishCity}</p>
        </div>

        <div className='flex gap-2'>
          {stage < 6 ? (
            <div className='bg-[#14161F] px-3 py-2 rounded-full w-fit flex items-center gap-1'>
              <p className='font-medium leading-none font-gilroy'>
                {stagePercentage}%
              </p>
              <ProgressPie value={stagePercentage} />
            </div>
          ) : (
            <div className='bg-gradient py-2.5 px-4 rounded-full'>
              <p className='font-medium leading-none font-gilroy'>
                {new Date(releaseDate).getFullYear()}
              </p>
            </div>
          )}

          {devices.length > 0 && (
            <>
              {devices.includes('stream') && (
                <div className='bg-[#14161F] px-3 py-2 rounded-full w-fit flex items-center gap-2'>
                  <div className='w-2 h-2 rounded-full bg-gradient'></div>
                  <p className='font-semibold leading-none font-gilroy text-gradient'>
                    Stream
                  </p>
                </div>
              )}
              {devices.includes('touch') && (
                <div className='bg-[#14161F] p-2 rounded-full w-fit flex items-center gap-2'>
                  <TouchScreenIcon />
                </div>
              )}
              {devices.includes('mobile') && (
                <div className='bg-[#14161F] p-2 rounded-full w-fit flex items-center gap-2'>
                  <MobileIcon />
                </div>
              )}
              {devices.includes('vr') && (
                <div className='bg-[#14161F] p-2 rounded-full w-fit flex items-center gap-2'>
                  <VRIcon />
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </motion.div>
  );
}

export default ProjectCard;
