import { type ReactNode } from 'react';

type SectionVariant = 'base' | 'card' | 'list' | 'searchFilterGray';

const variantClassMap: Record<SectionVariant, string> = {
  base: 'flex-center w-full bg-white shadow-card p-6',
  card: 'flex-center bg-white shadow-card p-6',
  list: 'flex flex-col h-full min-h-0 gap-4 bg-white shadow-card p-6',
  searchFilterGray: 'flex items-center bg-gray-100 py-3 px-7 text-kc-black-2a text-sm font-medium gap-3',
};

export type SectionProps = {
  variant: SectionVariant;
  children: ReactNode;
  className?: string;
};

export const Section = ({ variant, children, className }: SectionProps) => {
  const baseClassName = variantClassMap[variant];
  const mergedClassName = className ? `${baseClassName} ${className}` : baseClassName;

  return <section className={mergedClassName}>{children}</section>;
};