import React from 'react';
import { cn } from '../../utils/cn';

export interface CardProps {
    variant?: 'default' | 'manga' | 'gaming' | 'glass';
    children: React.ReactNode;
    className?: string;
    onClick?: () => void;
}

export const Card = React.forwardRef<HTMLDivElement, CardProps>(
    ({ variant = 'default', children, className, onClick }, ref) => {
        const base = 'relative transition-all duration-300 rounded-xl';

        const variants = {
            // Standard Card
            default: 'bg-kodo-graphite border border-kodo-steel/60 p-6 shadow-sm hover:border-kodo-steel',

            // Creative/Talas style
            manga:
                'bg-gradient-to-br from-kodo-graphite to-kodo-slate border border-kodo-magenta/20 p-6 hover:border-kodo-magenta/40 hover:shadow-neon-magenta/10',

            // Tech/Veza style
            gaming:
                'bg-kodo-ink border border-kodo-cyan/20 p-6 hover:border-kodo-cyan/40 hover:shadow-neon-cyan/10',

            // Glassmorphism
            glass: 'bg-kodo-slate/40 backdrop-blur-xl border border-white/5 p-6 hover:bg-kodo-slate/50',
        };

        return (
            <div
                ref={ref}
                className={cn(base, variants[variant], onClick && 'cursor-pointer', className)}
                onClick={onClick}
            >
                {children}
            </div>
        );
    }
);

Card.displayName = 'Card';
