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

interface FloatingGlassCardProps {
  icon: LucideIcon;
  title: string;
  subtitle: string;
  className?: string;
  /** Accent color for icon */
  accentColor?: string;
  /** Optional inline styles for animation delays */
  style?: CSSProperties;
}

const accentColorMap: Record<string, string> = {
  blue: "text-blue-500",
  green: "text-green-500",
  purple: "text-purple-500",
  amber: "text-amber-500",
  rose: "text-rose-500",
  cyan: "text-cyan-500",
  primary: "text-primary",
};

/**
 * Decorative floating glass card for hero section
 */
export function FloatingGlassCard({
  icon: Icon,
  title,
  subtitle,
  className,
  accentColor = "primary",
  style,
}: FloatingGlassCardProps) {
  const colorClass = accentColorMap[accentColor] || accentColorMap["primary"];

  return (
    <div
      className={cn("cp-glass-card px-5 py-4 min-w-[200px]", "shadow-xl shadow-black/5", className)}
      style={style}
    >
      <div className="flex items-center gap-3">
        <div
          className={cn(
            "h-10 w-10 rounded-lg flex items-center justify-center",
            "bg-background/50",
            colorClass
          )}
        >
          <Icon className="h-5 w-5" />
        </div>
        <div>
          <p className="font-semibold text-foreground text-sm">{title}</p>
          <p className="text-xs text-muted-foreground">{subtitle}</p>
        </div>
      </div>
    </div>
  );
}
