import { twMerge } from "tailwind-merge";
import { Button } from "../Button";
import { CameraPlusIcon } from "../../../icons";

type BannerProps = React.HTMLProps<HTMLDivElement> & {
  img: string;
  altText?: string;
  editable?: boolean;
  imgClassName?: string;
  onClickEdit?: () => void;
};

const Banner = ({
  img,
  altText,
  editable,
  className,
  imgClassName,
  onClickEdit,
}: BannerProps) => {
  return (
    <section className={twMerge(`h-[280px] relative`, className)}>
      <img
        src={img}
        alt={altText}
        className={twMerge(`object-cover h-full w-full overflow-hidden`, imgClassName)}
      />
      {editable && (
        <Button
          variant="primary-outline"
          className="absolute top-6 right-6 text-mono-700"
          onClick={onClickEdit}
        >
          <CameraPlusIcon />
          Edit cover photo
        </Button>
      )}
    </section>
  );
};

export { Banner, BannerProps };
