import { type ReactNode } from 'react';
import { type LucideIcon } from 'lucide-react';
import { Card, CardHeader, CardTitle, CardContent } from '@shared/components/ui/card';
import type { CardVariant } from '@lib/theme/variants';
import { cn } from '@lib/utils/cn';

/**
 * Section — Card + CardHeader + CardTitle + CardContent 조합을 한 번에
 *
 * 사용:
 *   <Section title="해역별 위험도" icon={BarChart3} iconColor="text-orange-400">
 *     {...}
 *   </Section>
 */
export interface SectionProps {
  title?: string;
  icon?: LucideIcon;
  iconColor?: string;
  variant?: CardVariant;
  /** 우측 액션 슬롯 (제목 옆 버튼 등) */
  actions?: ReactNode;
  children: ReactNode;
  className?: string;
  contentClassName?: string;
}

export function Section({
  title,
  icon: Icon,
  iconColor = 'text-muted-foreground',
  variant = 'default',
  actions,
  children,
  className,
  contentClassName,
}: SectionProps) {
  return (
    <Card variant={variant} className={className}>
      {title && (
        <CardHeader className="pb-2 flex flex-row items-center justify-between space-y-0">
          <CardTitle className="text-xs text-label flex items-center gap-1.5">
            {Icon && <Icon className={cn('w-3.5 h-3.5', iconColor)} />}
            {title}
          </CardTitle>
          {actions && <div className="flex items-center gap-1.5">{actions}</div>}
        </CardHeader>
      )}
      <CardContent className={cn(title ? 'pt-0' : 'pt-4', contentClassName)}>{children}</CardContent>
    </Card>
  );
}
