import cx from 'classnames'

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

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

type Props = {
  removePadding: ('top' | 'bottom')[] | null
  photoGrid: {
    fieldGroupName: string
    image: {
      alt: string
      imageUrl: string
      placeholder: string
    }
  }[]
}

export default function ThreeColPhotos({ removePadding, photoGrid }: Props) {
  const images = photoGrid.map(item => item.image)

  return (
    <section
      className={cx('grid grid-cols-1 sm:grid-cols-3 gap-2', {
        '-mt-20': removePadding?.includes('top'),
        '-mb-20': removePadding?.includes('bottom'),
      })}
    >
      {images.map((image, index) => (
        <div key={index} className="relative aspect-square">
          <BlurImage
            src={image.imageUrl}
            alt={image.alt}
            placeholderSrc={image.placeholder}
            fill
            className="object-cover"
            sizes={`(min-width: ${BREAKPOINTS.sm}) 33vw, 100vw`}
          />
        </div>
      ))}
    </section>
  )
}