import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

export type HoverRevealCardProps = {
  title: string;
  description: string;
  detail: string;
  tags?: string[];
  primaryLabel?: string;
  secondaryLabel?: string;
};

export function HoverRevealCard({
  title,
  description,
  detail,
  tags = [],
  primaryLabel = "Ver detalle",
  secondaryLabel = "Copiar"
}: HoverRevealCardProps) {
  return (
    <div className="group relative overflow-hidden rounded-2xl border border-border/70 bg-card/80 p-6 shadow-[0_12px_40px_-30px_hsl(var(--foreground)/0.4)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_18px_50px_-34px_hsl(var(--foreground)/0.45)] motion-reduce:transition-none">
      <div className="relative z-10 space-y-3">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
          Interaccion
        </p>
        <h3 className="text-lg font-semibold">{title}</h3>
        <p className="text-sm text-muted-foreground">{description}</p>
        <div className="flex flex-wrap gap-2">
          {tags.map((tag) => (
            <Badge key={tag} variant="secondary">
              {tag}
            </Badge>
          ))}
        </div>
      </div>

      <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
        <div className="absolute inset-0 bg-[radial-gradient(600px_circle_at_30%_0%,_hsl(var(--primary)/0.12),_transparent_60%)]" />
      </div>

      <div className="pointer-events-none absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-background/95 via-background/80 to-transparent p-6 opacity-0 translate-y-4 transition-all duration-200 group-hover:pointer-events-auto group-hover:opacity-100 group-hover:translate-y-0">
        <p className="text-sm text-foreground">{detail}</p>
        <div className="mt-4 flex flex-wrap gap-2">
          <Button size="sm">{primaryLabel}</Button>
          <Button size="sm" variant="outline">
            {secondaryLabel}
          </Button>
        </div>
      </div>
    </div>
  );
}
Card con capas
