import { cn } from "@/shared/utils";
import type { LucideIcon } from "lucide-react";

interface ValuePropCardProps {
  icon: LucideIcon;
  title: string;
  description: string;
  className?: string;
}

/**
 * Glass morphism value proposition card with gradient border on hover
 */
export function ValuePropCard({ icon: Icon, title, description, className }: ValuePropCardProps) {
  return (
    <div className={cn("group relative", className)}>
      {/* Gradient border wrapper - visible on hover */}
      <div
        className={cn(
          "absolute -inset-0.5 rounded-2xl",
          "bg-gradient-to-r from-primary/50 via-accent-gradient/50 to-primary/50",
          "opacity-0 group-hover:opacity-100 blur-sm",
          "transition-opacity duration-[var(--cp-duration-slowest)]"
        )}
        aria-hidden="true"
      />

      {/* Card */}
      <div
        className={cn(
          "relative flex flex-col items-center text-center p-8",
          "bg-card/80 dark:bg-card/60 backdrop-blur-sm",
          "border border-border/50 rounded-2xl",
          "transition-all duration-[var(--cp-duration-normal)]",
          "group-hover:-translate-y-1"
        )}
      >
        {/* Icon with animated background */}
        <div className="relative h-16 w-16 mb-6">
          <div
            className={cn(
              "absolute inset-0 rounded-xl",
              "bg-gradient-to-br from-primary/20 to-primary/5",
              "transition-transform duration-[var(--cp-duration-slow)]",
              "group-hover:scale-110"
            )}
          />
          <div className="relative h-full w-full flex items-center justify-center text-primary">
            <Icon
              className={cn(
                "h-8 w-8",
                "transition-transform duration-[var(--cp-duration-slow)]",
                "group-hover:scale-110"
              )}
            />
          </div>
        </div>

        {/* Content */}
        <h3 className="text-xl font-bold text-foreground mb-3 font-display">{title}</h3>
        <p className="text-muted-foreground leading-relaxed max-w-xs">{description}</p>
      </div>
    </div>
  );
}
