import { useState } from "react"
import { ArrowRight } from "lucide-react"
import { cn } from "@/lib/utils"

export function StoryCard({
  title,
  tagline,
  excerpt,
  href,
  index,
}: {
  title: string
  tagline: string
  excerpt: string
  href: string
  index: number
}) {
  const [isHovered, setIsHovered] = useState(false)

  return (
    <a
      href={href}
      className="group relative block"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <span className="absolute -left-4 md:-left-16 top-4 font-serif text-7xl md:text-9xl text-amber-600/[0.07] select-none transition-all duration-700 group-hover:text-amber-500/[0.12] group-hover:scale-105">
        {String(index + 1).padStart(2, "0")}
      </span>

      <div className="relative border-b border-amber-800/20 py-14 md:py-20 pl-8 md:pl-0">
        <div className="absolute inset-0 bg-gradient-to-r from-amber-900/0 via-amber-900/5 to-amber-900/0 opacity-0 group-hover:opacity-100 transition-opacity duration-700" />

        <div className="relative flex flex-col md:flex-row md:items-end justify-between gap-6 md:gap-8">
          <div className="flex-1">
            <span className="text-amber-500/40 text-[10px] tracking-[0.35em] uppercase mb-3 block font-sans">
              {tagline}
            </span>
            <h3 className="font-serif text-3xl md:text-5xl lg:text-6xl text-amber-100/70 tracking-wide transition-all duration-500 group-hover:text-amber-100/90">
              "{title}"
            </h3>
          </div>

          <div className="flex items-center gap-4 text-amber-500/40 group-hover:text-amber-400/80 transition-all duration-500">
            <span className="text-[10px] tracking-[0.3em] uppercase hidden md:block font-sans">Read</span>
            <div className="w-14 h-14 rounded-full border border-current flex items-center justify-center transition-all duration-500 group-hover:bg-amber-500/10 group-hover:scale-110 group-hover:border-amber-400/50">
              <ArrowRight className="w-5 h-5 transition-transform duration-500 group-hover:translate-x-1" />
            </div>
          </div>
        </div>

        <div
          className={cn(
            "overflow-hidden transition-all duration-700 ease-out",
            isHovered ? "max-h-40 opacity-100 mt-8" : "max-h-0 opacity-0 mt-0",
          )}
        >
          <p className="text-amber-200/40 font-serif text-lg md:text-xl italic max-w-3xl leading-relaxed">{excerpt}</p>
        </div>
      </div>
    </a>
  )
}
