import type { ComponentPropsWithoutRef, ReactNode } from 'react';
import { cn } from './cn';

type UiTone = 'default' | 'subtle';

type UiButtonVariant = 'primary' | 'secondary';

type UiCardTone = 'default' | 'muted';

type UiSectionPadding = 'none' | 'md' | 'lg';

export function UiPage({ className, ...props }: ComponentPropsWithoutRef<'div'>) {
  return <div className={cn('ui-page', className)} {...props} />;
}

export function UiSection({
  className,
  padding = 'md',
  ...props
}: ComponentPropsWithoutRef<'section'> & { padding?: UiSectionPadding }) {
  const paddingClass =
    padding === 'none' ? '' : padding === 'lg' ? 'px-5 py-6 md:px-6' : 'p-4 md:p-5';

  return <section className={cn('ui-section', paddingClass, className)} {...props} />;
}

export function UiCard({
  className,
  tone = 'default',
  ...props
}: ComponentPropsWithoutRef<'article'> & { tone?: UiCardTone }) {
  return (
    <article
      className={cn(
        'ui-card',
        tone === 'muted' ? 'bg-[var(--surface-muted)]/40' : '',
        className,
      )}
      {...props}
    />
  );
}

export function UiButton({
  className,
  variant = 'secondary',
  type = 'button',
  ...props
}: ComponentPropsWithoutRef<'button'> & { variant?: UiButtonVariant }) {
  return (
    <button
      type={type}
      className={cn('ui-btn', variant === 'primary' ? 'ui-btn-primary' : 'ui-btn-secondary', className)}
      {...props}
    />
  );
}

export function UiLinkButton({
  className,
  variant = 'secondary',
  ...props
}: ComponentPropsWithoutRef<'a'> & { variant?: UiButtonVariant }) {
  return (
    <a
      className={cn('ui-btn', variant === 'primary' ? 'ui-btn-primary' : 'ui-btn-secondary', className)}
      {...props}
    />
  );
}

export function UiChip({
  className,
  tone = 'default',
  children,
  ...props
}: ComponentPropsWithoutRef<'span'> & { tone?: UiTone; children: ReactNode }) {
  return (
    <span
      className={cn(
        'ui-chip',
        tone === 'subtle' ? 'bg-[var(--surface)] text-[var(--text-dim)]' : '',
        className,
      )}
      {...props}
    >
      {children}
    </span>
  );
}

export function UiBadge({ className, children, ...props }: ComponentPropsWithoutRef<'span'> & { children: ReactNode }) {
  return (
    <span className={cn('ui-badge', className)} {...props}>
      {children}
    </span>
  );
}
