import type { ClickableProps } from '~/src/components/Clickable';
import type { FC } from 'react';

import Clickable from '~/src/components/Clickable';
import Gradient from '~/src/components/Gradient';
import Image from '~/src/components/Image';
import Text from '~/src/components/Text';
import useIsLargeScreen from '~/src/hooks/useIsLargeScreen';
import toSizedImageUrlNext from '~/src/lib/toSizedImageUrlNext';
import { usePageTheme } from '../../../../hooks/theme';

const CarouselSectionItem: FC<
  { text?: string; image: string } & ClickableProps
> = ({ text, image, ...clickableProps }) => {
  const isLargeScreen = useIsLargeScreen();
  const pageTheme = usePageTheme();

  return (
    <Clickable
      {...clickableProps}
      fullHeight
      positionRelative
      withActiveStyle={false}
      testId="carouselItem"
      withHoverOpacityFrom={0.9}
      flexBox
      style={{
        paddingBottom: isLargeScreen ? '92%' : '108%',
        userSelect: 'none',
      }}
    >
      <Image
        src={toSizedImageUrlNext({
          url: image,
          width: isLargeScreen ? 1200 : 800,
        })}
        fillParent
        isLazy
        cover
        style={{
          position: 'absolute',
          // Solid backgroundColor (not gradientColor) — this is the
          // fallback shown behind the lazy-loading <img>, not a gradient
          // overlay. It should stay opaque regardless of gradientOpacity
          // so the carousel doesn't flash transparent on page open.
          background: pageTheme.backgroundColor,
        }}
        imgStyle={{
          userSelect: 'none',
          filter: 'saturate(.8) brightness(.95)',
        }}
      />
      <Gradient
        to="rgba(0,0,0,0.34)"
        positionAbsolute
        bottom={0}
        left={0}
        right={0}
        zIndex={2}
        height="50%"
        padding="2rem"
        flexBox
      >
        <Text
          centered
          margin="auto 0 0"
          fullWidth
          size="1.7rem"
          weight="bold"
          letterSpacing={0.01}
          className="text"
          withEllipsis
          color={pageTheme.customFontColor ?? '#fff'}
          shadow="0 0 .3em rgba(0,0,0,0.4)"
          opacity={0.9}
          family={pageTheme.fontFamily}
        >
          {text}
        </Text>
      </Gradient>
    </Clickable>
  );
};

export default CarouselSectionItem;