import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Clock, Users, LucideIcon } from "lucide-react"

interface FormationCardProps {
  icon: LucideIcon
  title: string
  description: string
  program: string[]
  specialization: {
    title: string
    items: string[]
  }
  duration: string
  maxParticipants: string
  color: 'red' | 'green' | 'blue'
  href?: string
}

export default function FormationCard({
  icon: Icon,
  title,
  description,
  program,
  specialization,
  duration,
  maxParticipants,
  color,
  href = "/formation/devis"
}: FormationCardProps) {
  const getColorClasses = () => {
    switch (color) {
      case 'red':
        return {
          card: "border-2 border-gray-700 hover:border-red-600 bg-gray-800 hover:shadow-xl transition-all duration-300",
          icon: "h-16 w-16 text-red-400 mx-auto mb-4",
          title: "text-2xl text-red-300",
          specialization: "bg-red-900",
          specializationTitle: "font-semibold text-red-200 mb-2",
          specializationItems: "text-sm text-red-300 space-y-1",
          button: "w-full bg-red-600 hover:bg-red-700 text-white"
        }
      case 'green':
        return {
          card: "border-2 border-gray-700 hover:border-green-600 bg-gray-800 hover:shadow-xl transition-all duration-300",
          icon: "h-16 w-16 text-green-400 mx-auto mb-4",
          title: "text-2xl text-green-300",
          specialization: "bg-green-900",
          specializationTitle: "font-semibold text-green-200 mb-2",
          specializationItems: "text-sm text-green-300 space-y-1",
          button: "w-full bg-green-600 hover:bg-green-700 text-white"
        }
      case 'blue':
        return {
          card: "border-2 border-gray-700 hover:border-blue-600 bg-gray-800 hover:shadow-xl transition-all duration-300",
          icon: "h-16 w-16 text-blue-400 mx-auto mb-4",
          title: "text-2xl text-blue-300",
          specialization: "bg-blue-900",
          specializationTitle: "font-semibold text-blue-200 mb-2",
          specializationItems: "text-sm text-blue-300 space-y-1",
          button: "w-full bg-blue-600 hover:bg-blue-700 text-white"
        }
    }
  }

  const colorClasses = getColorClasses()

  return (
    <Card className={colorClasses.card}>
      <CardHeader className="text-center">
        <Icon className={colorClasses.icon} />
        <CardTitle className={colorClasses.title}>{title}</CardTitle>
        <CardDescription className="text-lg text-gray-300">
          {description}
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-6 text-gray-300">
        <div>
          <h4 className="font-semibold mb-3">Programme de formation :</h4>
          <ul className="space-y-2">
            {program.map((item, index) => (
              <li key={index}>• {item}</li>
            ))}
          </ul>
        </div>
        
        <div className={`${colorClasses.specialization} p-4 rounded-lg`}>
          <h5 className={colorClasses.specializationTitle}>{specialization.title}</h5>
          <ul className={colorClasses.specializationItems}>
            {specialization.items.map((item, index) => (
              <li key={index}>• {item}</li>
            ))}
          </ul>
        </div>
        
        <div className="flex items-center justify-between text-sm text-gray-400">
          <div className="flex items-center">
            <Clock className="h-4 w-4 mr-1" />
            {duration}
          </div>
          <div className="flex items-center">
            <Users className="h-4 w-4 mr-1" />
            {maxParticipants}
          </div>
        </div>
        
        <Link href={href}>
          <Button className={colorClasses.button}>
            S'inscrire à la formation
          </Button>
        </Link>
      </CardContent>
    </Card>
  )
}