import { m } from 'framer-motion'

import { BREAKPOINTS, DEFAULT_SPRING_TRANSITION } from '@/lib/constants'

import BlurImage from '@/components/shared/BlurImage'

type Props = {
  image?: {
    alt: string
    imageUrl: string
    placeholder: string
  }
  title: string
}

export default function ColorCard({ image, title }: Props) {
  return (
    <div className="relative flex flex-col w-full">
      <div className="relative aspect-4/3 mb-4 bg-gray-light">
        {image && (
          <BlurImage
            src={image.imageUrl}
            alt={image.alt}
            placeholderSrc={image.placeholder}
            fill
            className="object-cover"
            sizes={`(min-width: ${BREAKPOINTS.sm}) 33vw, min-width: ${BREAKPOINTS.md}) 50vw, 100vw`}
          />
        )}
      </div>

      <h3 className="text-h10 pb-1">{title}</h3>

      <m.div
        className="h-1 w-full mt-auto bg-black origin-left"
        initial={{ opacity: 0, scaleX: 0 }}
        whileInView={{ opacity: 1, scaleX: 1 }}
        viewport={{
          once: true,
          margin: `0px 0px -10% 0px`,
        }}
        transition={DEFAULT_SPRING_TRANSITION}
        aria-hidden
      />
    </div>
  )
}