'use client';

import { FC, ReactNode } from 'react';
import { cn } from '@/utils/helpers';
import styles from './Card.module.scss';

export interface CardProps {
  title?: string;
  extra?: ReactNode;
  padding?: boolean;
  shadow?: boolean;
  className?: string;
  children: ReactNode;
}

export const Card: FC<CardProps> = ({
  title,
  extra,
  padding = true,
  shadow = true,
  className,
  children,
}) => {
  return (
    <div
      className={cn(
        styles.card,
        !padding && styles['card--noPadding'],
        !shadow && styles['card--noShadow'],
        className
      )}
    >
      {(title || extra) && (
        <div className={styles.card__header}>
          {title && <h3 className={styles.card__title}>{title}</h3>}
          {extra && <div className={styles.card__extra}>{extra}</div>}
        </div>
      )}
      <div className={styles.card__body}>{children}</div>
    </div>
  );
};
