import cx from "classnames";
import type { HTMLAttributes, ReactNode } from "react";
import React from "react";
import { Image } from "@/components/Image";
import { Container } from "../Container";
import {
  CLASS_SLIDE,
  CLASS_SLIDE_CONTAINER,
  CLASS_SLIDE_CONTENT,
  CLASS_SLIDE_IMAGE,
} from "./constants";

const CLASS_ROOT = CLASS_SLIDE;

interface CarouselHeroItemProps extends HTMLAttributes<HTMLDivElement> {
  className?: string;
  children?: ReactNode;
  image: string;
}

const CarouselHeroItem: React.FC<CarouselHeroItemProps> = ({
  className,
  children,
  image,
  ...other
}) => {
  const classes = cx(CLASS_ROOT, className);

  return (
    <div className={classes} {...other}>
      <Container className={CLASS_SLIDE_CONTAINER}>
        <div className={CLASS_SLIDE_CONTENT}>{children}</div>
        <Image className={CLASS_SLIDE_IMAGE} src={image} alt="Obrázok" />
      </Container>
    </div>
  );
};

CarouselHeroItem.displayName = "CarouselHeroItem";

export { CarouselHeroItem };