/** Karte — die Grundflaeche aller Inhalte. */

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

export function Card({ className, ...restProps }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn('rounded-lg border border-line bg-card', className)}
      {...restProps}
    />
  );
}

export function CardHeader({
  className,
  title,
  description,
  action,
  ...restProps
}: HTMLAttributes<HTMLDivElement> & {
  readonly title?: ReactNode | undefined;
  readonly description?: ReactNode | undefined;
  readonly action?: ReactNode | undefined;
}) {
  return (
    <div
      className={cn(
        'flex items-start justify-between gap-4 border-b border-line px-5 py-4',
        className,
      )}
      {...restProps}
    >
      <div className="min-w-0">
        {title ? <h2 className="text-sm font-semibold text-fg">{title}</h2> : null}
        {description ? (
          <p className="mt-1 text-sm text-fg-muted">{description}</p>
        ) : null}
      </div>
      {action ? <div className="shrink-0">{action}</div> : null}
    </div>
  );
}

export function CardContent({ className, ...restProps }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn('px-5 py-4', className)} {...restProps} />;
}

export function CardFooter({ className, ...restProps }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      className={cn(
        'flex items-center justify-end gap-2 border-t border-line px-5 py-3',
        className,
      )}
      {...restProps}
    />
  );
}