Card

1"use client"
2 
3import * as React from "react"
4import { Card as BaseCard, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
5import { cn } from "@/lib/utils"
6import type { GlassCustomization } from "@/lib/glass-utils"
7import { hoverEffects, type HoverEffect } from "@/lib/hover-effects"
8 
9export interface CardProps extends React.ComponentProps<typeof BaseCard> {
10  gradient?: boolean
11  animated?: boolean
12  hover?: HoverEffect
13  glass?: GlassCustomization
14}
15 
16/**
17 * Glass UI Card - A beautifully designed card component with glassy effects
18 * Built on top of the base Card component with enhanced visual styling
19 * 
20 * @example
21 * ```tsx
22 * // Standard glass variant (default)
23 * <Card variant="glass">
24 *   Content
25 * </Card>
26 * 
27 * // Frosted glass variant - enhanced blur and opacity
28 * <Card variant="frosted">
29 *   Content
30 * </Card>
31 * 
32 * // Fluted glass variant - vertical ridges texture
33 * <Card variant="fluted">
34 *   Content
35 * </Card>
36 * 
37 * // Crystal glass variant - clear with highlights and glow
38 * <Card variant="crystal">
39 *   Content
40 * </Card>
41 * 
42 * // Custom glass properties
43 * <Card 
44 *   variant="glass"
45 *   glass={{
46 *     color: "rgba(139, 92, 246, 0.2)",
47 *     blur: 30,
48 *     transparency: 0.3,
49 *     outline: "rgba(139, 92, 246, 0.5)",
50 *     innerGlow: "rgba(255, 255, 255, 0.3)",
51 *     innerGlowBlur: 25
52 *   }}
53 *   gradient
54 *   animated
55 * >
56 *   Content
57 * </Card>
58 * ```
59 */
60export const Card = React.forwardRef<HTMLDivElement, CardProps>(
61  ({ className, variant = "glass", gradient = false, animated = false, hover = "none", glass, children, ...props }, ref) => {
62    return (
63      <BaseCard
64        ref={ref}
65        variant={variant}
66        glass={glass}
67        className={cn(
68          "relative overflow-hidden",
69          gradient && "bg-gradient-to-br from-purple-500/10 via-blue-500/10 to-pink-500/10",
70          animated && "transition-all duration-300 hover:scale-[1.02] hover:shadow-[var(--glass-shadow-lg)]",
71          hoverEffects({ hover }),
72          className
73        )}
74        {...props}
75      >
76        {children}
77      </BaseCard>
78    )
79  }
80)
81Card.displayName = "Card"
82 
83export {
84  CardContent,
85  CardDescription,
86  CardFooter,
87  CardHeader,
88  CardTitle,
89}
90