import type { PropsWithChildren } from 'react';

import { cls } from '../../utils/cls';

interface CardProps extends PropsWithChildren {
  className?: string;
}

export const Card = ({ className = '', children }: CardProps) => (
  <div className={cls('rounded-2xl border bg-white shadow-sm', className)}>{children}</div>
);

export const CardHeader = ({ children }: PropsWithChildren) => (
  <div className='px-5 pt-4 pb-2 font-medium flex items-center justify-between'>{children}</div>
);

export const CardContent = ({ children }: PropsWithChildren) => (
  <div className='px-5 pb-5'>{children}</div>
);