"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";

import { cn } from "@/lib/utils";

interface PromoCardProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  imageSrc?: string;
  showArrowButton?: boolean;
  arrowDirection?: "left" | "right";
  onArrowClick?: () => void;
  className?: string;
}

export default function PromoCard({
  eyebrow,
  title,
  description,
  imageSrc = "/images/promo-beauty-card.png",
  showArrowButton = false,
  arrowDirection = "right",
  onArrowClick,
  className,
}: PromoCardProps) {
  const router = useRouter();

  const handleArrowClick = () => {
    if (onArrowClick) {
      onArrowClick();
      return;
    }

    if (arrowDirection === "left") {
      router.back();
    }
  };

  return (
    <article
      className={cn(
        "relative aspect-[4/5] w-full max-w-[360px] overflow-hidden rounded-lg bg-emerald-950 text-white",
        className
      )}
    >
      <Image
        src={imageSrc}
        alt=""
        fill
        sizes="(max-width: 640px) 100vw, 360px"
        className="object-cover"
        priority
      />
      <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/5 to-black/0" />

      {(eyebrow || title || description) && (
        <div className="relative z-10 max-w-[88%] p-6">
          {eyebrow && (
            <p className="mb-2 text-xs font-medium text-white/80">{eyebrow}</p>
          )}
          {title && (
            <h2 className="text-xl font-semibold leading-tight tracking-normal sm:text-2xl">
              {title}
            </h2>
          )}
          {description && (
            <p className="mt-3 max-w-[230px] text-sm leading-5 text-white/80">
              {description}
            </p>
          )}
        </div>
      )}

      {showArrowButton && (
        <button
          type="button"
          onClick={handleArrowClick}
          className="absolute bottom-7 right-7 z-10 flex h-14 w-14 items-center justify-center rounded-full bg-black/35 text-white backdrop-blur-sm transition-colors hover:bg-black/50"
          aria-label={arrowDirection === "left" ? "Go back" : "View next"}
        >
          <svg
            className={cn("h-6 w-6", arrowDirection === "left" && "rotate-180")}
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            strokeWidth={2.2}
          >
            <path strokeLinecap="round" strokeLinejoin="round" d="m9 5 7 7-7 7" />
          </svg>
        </button>
      )}
    </article>
  );
}
