import { cn } from "@/lib/utils"
import type { ReactNode } from "react"

interface SurrealCardProps {
  children: ReactNode
  className?: string
  glow?: boolean
}

export function SurrealCard({ children, className, glow = false }: SurrealCardProps) {
  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-xl bg-card p-6 border border-border",
        "transition-all duration-300 ease-out",
        "hover:border-primary/50 hover:translate-y-[-2px]",
        glow && "shadow-lg shadow-primary/20",
        className,
      )}
    >
      {children}
    </div>
  )
}

export function SurrealCardHeader({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={cn("mb-4", className)}>{children}</div>
}

export function SurrealCardTitle({ children, className }: { children: ReactNode; className?: string }) {
  return <h3 className={cn("text-xl font-semibold text-foreground", className)}>{children}</h3>
}

export function SurrealCardDescription({ children, className }: { children: ReactNode; className?: string }) {
  return <p className={cn("text-sm text-muted-foreground mt-1", className)}>{children}</p>
}

export function SurrealCardContent({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={cn("text-foreground", className)}>{children}</div>
}

export function SurrealCardFooter({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={cn("mt-6 flex items-center gap-3", className)}>{children}</div>
}
