import React from 'react';
import { cn } from '../utils/helpers';
import type { ComponentBaseProps } from '../types';
import styles from './Card.module.css';

export interface CardProps extends ComponentBaseProps {
  padding?: 'none' | 'sm' | 'md' | 'lg';
  hoverable?: boolean;
  onClick?: () => void;
  children?: React.ReactNode;
}

export interface CardSectionProps extends ComponentBaseProps {
  noPadding?: boolean;
  children?: React.ReactNode;
}

export const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ padding = 'md', hoverable = false, onClick, children, className, style, id }, ref) => {
    const classes = cn(
      styles.card,
      padding && styles[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}`],
      hoverable && styles.hoverable,
      onClick && styles.clickable,
      className
    );

    return (
      <div ref={ref} className={classes} style={style} id={id} onClick={onClick}>
        {children}
      </div>
    );
  }
);

Card.displayName = 'Card';

export const CardHeader = React.forwardRef<HTMLDivElement, CardSectionProps>(
  ({ noPadding = false, children, className, style, id }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(styles.header, noPadding && styles.noPadding, className)}
        style={style}
        id={id}
      >
        {children}
      </div>
    );
  }
);

CardHeader.displayName = 'CardHeader';

export const CardBody = React.forwardRef<HTMLDivElement, CardSectionProps>(
  ({ noPadding = false, children, className, style, id }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(styles.body, noPadding && styles.noPadding, className)}
        style={style}
        id={id}
      >
        {children}
      </div>
    );
  }
);

CardBody.displayName = 'CardBody';

export const CardFooter = React.forwardRef<HTMLDivElement, CardSectionProps>(
  ({ noPadding = false, children, className, style, id }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(styles.footer, noPadding && styles.noPadding, className)}
        style={style}
        id={id}
      >
        {children}
      </div>
    );
  }
);

CardFooter.displayName = 'CardFooter';