type PreviewImageCardProps = {
  selectedImage: number
  index: 0 | 1 | 2
}

const PreviewImageCard = ({ selectedImage, index }: PreviewImageCardProps) => {
  const indexDistance = Math.abs(index - selectedImage)
  const sizeScale = 11 - indexDistance * 2
  const baseOffset = (-selectedImage + 1) * 33
  const additionalOffset = (index - selectedImage) * 25

  return (
    <Group
      className={clsx(classes.imageContainer, classes.animated)}
      wrap="nowrap"
      style={{
        left: `${baseOffset + additionalOffset}%`,
        top: indexDistance * 20,
        opacity: selectedImage === index ? 1 : indexDistance <= 1 ? 0.5 : 0,
        zIndex: indexDistance === 0 ? 3 : 1,
      }}
    >
      <Image
        src={images[index]!}
        alt={`Zdjęcie widoku '${periods[index]?.label}' w panelu hodowcy`}
        className={clsx(classes.animated, classes.image)}
        style={{ [classes.sizeScale]: sizeScale } as CSSProperties}
        height="0"
        width="0"
        sizes="100vw"
      />
    </Group>
  )
}

const images = [
  '/img/landing/webp/Pigeons.webp',
  '/img/landing/webp/Dashboard.webp',
  '/img/landing/webp/Pedigree.webp',
]

const periods = [
  { label: 'Moje gołębie', value: '0' },
  { label: 'Dashboard', value: '1' },
  { label: 'Generator rodowodu', value: '2' },
]