import { clsx } from 'clsx';
import type { HTMLAttributes } from 'react';

function Root({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={clsx(
        'bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-lg)] shadow-[var(--shadow-sm)]',
        className,
      )}
      {...rest}
    />
  );
}

function Header({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
  return <div className={clsx('px-6 pt-6 pb-3', className)} {...rest} />;
}

function Body({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
  return <div className={clsx('px-6 py-3', className)} {...rest} />;
}

function Footer({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={clsx('px-6 pt-3 pb-6 border-t border-[var(--color-border)]', className)}
      {...rest}
    />
  );
}

export const Card = { Root, Header, Body, Footer };