'use client';

/**
 * 섹션 헤더 공통 컴포넌트
 *
 * @example
 * <SectionHeader>작업내역</SectionHeader>
 * <SectionHeader variant="light">특이사항</SectionHeader>
 */

import { ReactNode } from 'react';
import { cn } from '@/lib/utils';

export interface SectionHeaderProps {
  /** 섹션 제목 */
  children: ReactNode;
  /** 스타일 변형: dark(검정), light(회색), primary(파랑) */
  variant?: 'dark' | 'light' | 'primary';
  /** 추가 className */
  className?: string;
}

const variantStyles = {
  dark: 'bg-gray-800 text-white',
  light: 'bg-gray-100 text-gray-800 border-b border-gray-300',
  primary: 'bg-blue-600 text-white',
};

export function SectionHeader({
  children,
  variant = 'dark',
  className,
}: SectionHeaderProps) {
  return (
    <div
      className={cn(
        'p-2.5 text-sm font-medium text-center',
        variantStyles[variant],
        className
      )}
    >
      {children}
    </div>
  );
}
