import { ArrowRight, type LucideIcon } from "lucide-react";
import { useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";

interface TemplateCardProps {
  title: string;
  description: string;
  icon: LucideIcon;
  tags: string[];
}

export function TemplateCard({
  title,
  description,
  icon: Icon,
  tags,
}: TemplateCardProps) {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <Card
      className="group relative overflow-hidden transition-all duration-300 hover:border-foreground/20 cursor-pointer"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <CardHeader>
        <div className="flex items-center justify-between mb-4">
          <div className="p-3 rounded-lg bg-secondary/50 transition-colors group-hover:bg-secondary">
            <Icon className="h-6 w-6" />
          </div>
          <ArrowRight
            className={`h-5 w-5 transition-all duration-300 ${
              isHovered
                ? "translate-x-0 opacity-100"
                : "-translate-x-2 opacity-0"
            }`}
          />
        </div>
        <CardTitle className="text-xl">{title}</CardTitle>
        <CardDescription className="text-base leading-relaxed">
          {description}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-wrap gap-2">
          {tags.map((tag, index) => (
            <Badge key={index} variant="secondary" className="text-xs">
              {tag}
            </Badge>
          ))}
        </div>
        <Button
          variant="ghost"
          className="w-full mt-4 justify-between group-hover:bg-secondary"
        >
          View Template
          <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
        </Button>
      </CardContent>
    </Card>
  );
}