import { Clock } from "lucide-react"
import { format } from "date-fns"
import { cn } from "@/lib/utils"

export function AgendaItem({ time, name, service, active }: { time: string; name: string; service: string; active?: boolean }) {
  const displayTime = format(new Date(time), "H:mm")
  return (
    <div
      className={cn(
        "flex items-stretch rounded-xl border border-gray-20 transition-colors",
        // active ? "bg-[#FDF7E9]" : "hover:bg-light-blue/40"
      )}
    >
      {/* Left: Icon and time */}
      <div className="flex flex-col items-center justify-center w-16 min-w-16 py-3 gap-1">
        <Clock className="w-6 h-6 text-gray-400" />
        <span className="text-xs text-gray-500">{displayTime}</span>
      </div>
      {/* Divider */}
      <div className="w-px bg-gray-200 mx-2 my-2" />
      {/* Right: Name and service */}
      <div className="flex flex-col justify-center flex-1 py-3">
        <p className="text-sm font-medium text-gradient-start">{name}</p>
        <p className="text-xs text-gray-500">{service}</p>
      </div>
    </div>
  )
}