Glare Card

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";

const pixelGlareCardVariants = cva(
  "relative overflow-hidden pixel-borders transition-all duration-300",
  {
    variants: {
      variant: {
        default:
          "bg-white dark:bg-black border-2 border-black dark:border-white",
        primary: "bg-[#ff8c00] border-2 border-black dark:border-[#ff8c00]",
        secondary: "bg-[#ffd700] border-2 border-black dark:border-[#ffd700]",
        glass:
          "bg-white/10 dark:bg-black/10 backdrop-blur-sm border-2 border-white/20",
      },
      size: {
        sm: "p-4",
        md: "p-6",
        lg: "p-8",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  },
);

export interface PixelGlareCardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelGlareCardVariants> {
  glareColor?: string;
  glareOpacity?: number;
  glareSize?: number;
  playOnce?: boolean;
}

const PixelGlareCard = React.forwardRef<HTMLDivElement, PixelGlareCardProps>(
  (
    {
      glareColor = "#ffffff",
      glareOpacity = 0.5,
      glareSize = 250,
      playOnce = false,
      variant,
      size,
      className,

// ... (more code below)