import Link from "next/link";
import { ImagePlaceholder } from "@/components/ImagePlaceholder";
import type { ImageMood } from "@/lib/angebote";

type AngebotCardProps = {
  href: string;
  title: string;
  tagline: string;
  mood: ImageMood;
  imageSrc?: string;
  imageAlt?: string;
  size?: "default" | "large";
};

export function AngebotCard({
  href,
  title,
  tagline,
  mood,
  imageSrc,
  imageAlt,
  size = "default",
}: AngebotCardProps) {
  return (
    <Link href={href} className="group block">
      <div
        className={`relative overflow-hidden rounded-[2.5rem] ${
          size === "large" ? "aspect-[4/3]" : "aspect-[4/5]"
        }`}
      >
        <ImagePlaceholder
          mood={mood}
          label={title}
          src={imageSrc}
          alt={imageAlt}
          shape="soft"
          className="h-full w-full transition-transform duration-700 ease-out group-hover:scale-[1.04]"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-anouma-plum/70 via-anouma-plum/0 to-transparent" />
        <div className="absolute inset-x-0 bottom-0 p-7">
          <h3 className="font-serif text-2xl font-medium text-white">{title}</h3>
          <p className="mt-2 text-sm leading-relaxed text-white/90">{tagline}</p>
          <span className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-white/95">
            Mehr erfahren
            <svg width="14" height="10" viewBox="0 0 14 10" fill="none" aria-hidden="true" className="transition-transform duration-300 group-hover:translate-x-1">
              <path d="M1 5h11.5M8 1l4.5 4L8 9" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>
        </div>
      </div>
    </Link>
  );
}