import { ReactNode, CSSProperties } from 'react';
import './NeonCard.css';

type Accent = 'cyan' | 'magenta' | 'amber' | 'green' | 'purple' | 'brass' | 'gold';

interface NeonCardProps {
  children: ReactNode;
  className?: string;
  accent?: Accent;
  tilt3d?: boolean;
  hud?: boolean;
  style?: CSSProperties;
}

export default function NeonCard({
  children,
  className = '',
  accent = 'brass',
  tilt3d = true,
  hud = false,
  style,
}: NeonCardProps) {
  return (
    <div
      className={`neon-card neon-card-${accent} ${tilt3d ? 'neon-card-3d' : ''} ${hud ? 'hud-corners' : ''} ${className}`}
      style={style}
    >
      <div className="neon-card-rim" />
      {children}
    </div>
  );
}
