import type { HTMLAttributes } from 'react';
import { cn } from '@/lib/cn';

export type CardTone = 'default' | 'raised' | 'glow' | 'outline';

const tones: Record<CardTone, string> = {
  default: 'border border-line bg-surface/85 shadow-card',
  raised: 'border border-line bg-raised shadow-lift',
  // Featured card: gradient hairline + violet glow.
  glow:
    'border border-violet/60 bg-[linear-gradient(180deg,rgb(124_92_255/0.16),rgb(13_20_51/0.92)_42%)] shadow-glow-violet',
  outline: 'border border-dashed border-line-strong/70 bg-transparent',
};

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  tone?: CardTone;
  /** Inner padding preset; pass `none` to lay out your own. */
  padding?: 'none' | 'sm' | 'md' | 'lg';
  /** Lifts on hover (use when the whole card is a link target). */
  interactive?: boolean;
}

const paddings = { none: '', sm: 'p-4', md: 'p-6', lg: 'p-6 sm:p-8' } as const;

export function Card({ tone = 'default', padding = 'md', interactive, className, ...rest }: CardProps) {
  return (
    <div
      className={cn(
        'relative rounded-card',
        tones[tone],
        paddings[padding],
        interactive &&
          'transition-[transform,border-color,box-shadow] duration-300 hover:border-violet-soft/70 motion-safe:hover:-translate-y-1',
        className,
      )}
      {...rest}
    />
  );
}