import * as React from 'react';
import { clsx } from 'clsx';

export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  padding?: 'none' | 'sm' | 'md' | 'lg';
  variant?: 'default' | 'muted' | 'elevated' | 'outline';
  hover?: boolean;
}

const paddings: Record<string, string> = {
  none: '',
  sm: 'p-4',
  md: 'p-5',
  lg: 'p-6',
};

export function Card({
  padding = 'md',
  variant = 'default',
  hover,
  className,
  children,
  ...props
}: CardProps) {
  const variants: Record<NonNullable<CardProps['variant']>, string> = {
    default:
      'bg-[var(--bl-surface-card,#1a1a2e)] border-[var(--bl-border,#2a2a4a)] shadow-sm shadow-black/[0.04]',
    muted: 'bg-[var(--bl-surface-muted,#252540)] border-[var(--bl-border,#2a2a4a)]',
    elevated:
      'bg-[var(--bl-bg-elevated,#12151c)] border-[var(--bl-border,#2a2a4a)] shadow-lg shadow-black/10',
    outline: 'bg-transparent border-[var(--bl-border,#2a2a4a)]',
  };

  return (
    <div
      className={clsx(
        'rounded-xl border',
        variants[variant],
        hover &&
          'transition duration-150 hover:-translate-y-0.5 hover:border-[var(--bl-accent,#5A8CFF)] hover:shadow-lg hover:shadow-black/10',
        paddings[padding],
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
}

export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}

export function CardHeader({ className, children, ...props }: CardHeaderProps) {
  return (
    <div className={clsx('mb-4 flex flex-col gap-1', className)} {...props}>
      {children}
    </div>
  );
}

export type CardTitleProps = React.ComponentPropsWithoutRef<'h3'>;

export function CardTitle({ className, children, ...props }: CardTitleProps) {
  return (
    <h3
      className={clsx(
        'm-0 text-base font-semibold leading-6 text-[var(--bl-text-primary,#fff)]',
        className
      )}
      {...props}
    >
      {children}
    </h3>
  );
}

export type CardDescriptionProps = React.ComponentPropsWithoutRef<'p'>;

export function CardDescription({ className, children, ...props }: CardDescriptionProps) {
  return (
    <p
      className={clsx('m-0 text-sm leading-6 text-[var(--bl-text-secondary,#a0a0b0)]', className)}
      {...props}
    >
      {children}
    </p>
  );
}