import { motion } from "framer-motion"
import { ChevronRight } from "lucide-react"

import { cn } from "@/lib/utils"
import type { Task } from "@/data/project"

interface WorkPlanCardProps {
  task: Task
  index: number
  active: boolean
  onActivate: () => void
  onDeactivate: () => void
  onOpen: () => void
}

export function WorkPlanCard({
  task,
  index,
  active,
  onActivate,
  onDeactivate,
  onOpen,
}: WorkPlanCardProps) {
  return (
    <motion.button
      type="button"
      initial={{ opacity: 0, y: 16 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-60px" }}
      transition={{ duration: 0.4, delay: index * 0.05, ease: "easeOut" }}
      onMouseEnter={onActivate}
      onMouseLeave={onDeactivate}
      onFocus={onActivate}
      onBlur={onDeactivate}
      onClick={onOpen}
      aria-label={`${task.id}: ${task.title} — view timeline`}
      className={cn(
        "group flex h-full flex-col rounded-xl border bg-card p-5 text-left transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
        active
          ? "-translate-y-1 border-brand/50 shadow-md"
          : "border-border hover:-translate-y-1 hover:shadow-md"
      )}
    >
      <div className="flex items-center justify-between">
        <span
          className={cn(
            "flex h-9 w-9 items-center justify-center rounded-lg text-sm font-bold transition-colors",
            active ? "bg-brand text-brand-foreground" : "bg-secondary text-primary"
          )}
        >
          {task.id}
        </span>
        <ChevronRight
          className={cn(
            "h-5 w-5 transition-all",
            active
              ? "translate-x-0.5 text-brand"
              : "text-muted-foreground/40 group-hover:text-brand"
          )}
        />
      </div>
      <h4 className="mt-4 font-semibold leading-snug text-foreground">
        {task.title}
      </h4>
      <p className="mt-2 line-clamp-3 text-sm leading-relaxed text-muted-foreground">
        {task.description}
      </p>
      <span className="mt-4 text-xs font-medium uppercase tracking-wider text-muted-foreground/70">
        Month {task.startMonth}–{task.endMonth}
      </span>
    </motion.button>
  )
}
