import type { FC, ReactNode } from 'react';
import { cn } from '../../lib/utils';

interface CardProps {
  children: ReactNode;
  className?: string;
  noPadding?: boolean;
}

interface CardHeaderProps {
  children: ReactNode;
  className?: string;
}

interface CardBodyProps {
  children: ReactNode;
  className?: string;
  noPadding?: boolean;
}

export const Card: FC<CardProps> & {
  Header: FC<CardHeaderProps>;
  Body: FC<CardBodyProps>;
} = ({ children, className }) => {
  return (
    <div
      className={cn(
        'bg-theme-surface rounded-2xl border border-theme-border shadow-card',
        className
      )}
    >
      {children}
    </div>
  );
};

const CardHeader: FC<CardHeaderProps> = ({ children, className }) => {
  return (
    <div
      className={cn(
        'px-4 py-4 sm:px-6 sm:py-5 border-b border-theme-border flex flex-col sm:flex-row sm:items-center justify-between gap-3',
        className
      )}
    >
      {children}
    </div>
  );
};

const CardBody: FC<CardBodyProps> = ({ children, className, noPadding = false }) => {
  return (
    <div className={cn(!noPadding && 'p-4 sm:p-6', className)}>
      {children}
    </div>
  );
};

Card.Header = CardHeader;
Card.Body = CardBody;

export default Card;
