import cx from 'classnames'

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

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

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

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

  return (
    <section
      className={cx(`grid gap-2 sm:grid-areas-asymmetrical-mobile`, {
        'md:grid-areas-asymmetrical-left': largeImagePlacement === 'left',
        'md:grid-areas-asymmetrical-right': largeImagePlacement === 'right',
        '-mt-20': removePadding?.includes('top'),
        '-mb-20': removePadding?.includes('bottom'),
      })}
    >
      {images.map((image, index) => {
        const isSmall1 =
          (index === 0 && largeImagePlacement === 'right') || (index === 2 && largeImagePlacement === 'left')
        const isSmall2 = index === 1
        const isSmall = isSmall1 || isSmall2

        return (
          <div
            key={index}
            className={cx('relative aspect-square', {
              'sm:grid-in-lg': !isSmall,
              'sm:grid-in-sm1': isSmall1,
              'sm:grid-in-sm2': isSmall2,
            })}
          >
            <BlurImage
              src={image.imageUrl}
              alt={image.alt}
              placeholderSrc={image.placeholder}
              fill
              className="object-cover"
              sizes={
                isSmall
                  ? `(min-width: ${BREAKPOINTS.md}) 33vw, (min-width: ${BREAKPOINTS.sm}) 50vw, 100vw`
                  : `(min-width: ${BREAKPOINTS.md}) 66vw, 100vw`
              }
            />
          </div>
        )
      })}
    </section>
  )
}