import cx from 'classnames'

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

type Props = {
  image: {
    alt: string
    imageUrl: string
    placeholder: string
  }
  removePadding?: ('top' | 'bottom')[] | null
  aspect?: '2/1' | '4/3' | '16/9'
  postType?: string
}

export default function FullWidthPhoto({ image, removePadding, aspect = '4/3', postType }: Props) {
  const ignoreAspect = postType === 'project' || postType === 'case_study'

  return (
    <section
      className={cx('relative', !ignoreAspect && `aspect-${aspect}`, {
        '-mt-20': removePadding?.includes('top'),
        '-mb-20': removePadding?.includes('bottom'),
      })}
    >
      <BlurImage
        src={image.imageUrl}
        alt={image.alt}
        placeholderSrc={image.placeholder}
        className="object-cover"
        sizes="100vw"
        {...(ignoreAspect
          ? {
              width: 1200,
              height: 9999,
            }
          : {
              fill: true,
            })}
      />
    </section>
  )
}