import { Image as ImageIcon } from "lucide-react";
import { cn } from "@/lib/utils";

interface PlaceholderProps {
  text: string;
  className?: string;
  aspect?: "video" | "square" | "portrait" | "auto" | "banner";
}

export function Placeholder({ text, className, aspect = "video" }: PlaceholderProps) {
  const aspectClasses = {
    video: "aspect-video",
    square: "aspect-square",
    portrait: "aspect-[3/4]",
    banner: "aspect-[21/9] min-h-[300px]",
    auto: "h-full w-full",
  };

  return (
    <div
      className={cn(
        "relative w-full bg-slate-100 dark:bg-slate-800 border-2 border-dashed border-slate-200 dark:border-slate-700 rounded-xl flex flex-col items-center justify-center text-center p-6 text-slate-400 dark:text-slate-500 overflow-hidden group hover:bg-slate-150 transition-colors duration-250",
        aspectClasses[aspect],
        className
      )}
    >
      {/* TODO: docelowe zdjęcie — {text} */}
      <ImageIcon className="size-10 mb-3 group-hover:scale-110 transition-transform duration-300" />
      <span className="text-sm font-medium px-4 leading-normal">{text}</span>
      <span className="text-[10px] text-slate-400 mt-2 uppercase tracking-widest font-semibold font-heading opacity-70">
        Placeholder Zdjęcia
      </span>
    </div>
  );
}