import { Link } from "react-router-dom";
import { ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";

interface ThemeCardProps {
  title: string;
  description: string;
  path: string;
  icon?: React.ReactNode;
  className?: string;
}

const ThemeCard = ({ title, description, path, icon, className }: ThemeCardProps) => {
  return (
    <Link
      to={path}
      className={cn(
        "group block bg-surface border border-outline rounded-lg p-6 shadow-card hover:shadow-card-hover transition-all duration-200",
        className
      )}
    >
      <div className="flex items-start justify-between">
        <div className="flex-1">
          {icon && (
            <div className="w-12 h-12 bg-surface-variant rounded-lg flex items-center justify-center mb-4 group-hover:bg-accent group-hover:text-accent-foreground transition-colors">
              {icon}
            </div>
          )}
          <h3 className="text-lg font-semibold text-foreground mb-2 group-hover:text-accent transition-colors">
            {title}
          </h3>
          <p className="text-muted-foreground text-sm leading-relaxed">
            {description}
          </p>
        </div>
        <ArrowRight className="w-5 h-5 text-muted-foreground group-hover:text-accent transition-all flex-shrink-0 ml-4" />
      </div>
    </Link>
  );
};

export default ThemeCard;