/**
 * DetailSection - 상세 페이지 섹션 래퍼 컴포넌트
 *
 * Card 기반의 섹션 컨테이너로 제목, 설명, 접기/펼치기 기능 제공
 */

'use client';

import { useState, type ReactNode } from 'react';
import { ChevronDown, ChevronUp } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

export interface DetailSectionProps {
  /** 섹션 제목 */
  title: string;
  /** 섹션 설명 (선택) */
  description?: string;
  /** 섹션 내용 */
  children: ReactNode;
  /** 접기/펼치기 가능 여부 (default: false) */
  collapsible?: boolean;
  /** 기본 펼침 상태 (default: true) */
  defaultOpen?: boolean;
  /** 추가 클래스 */
  className?: string;
  /** 헤더 우측 액션 영역 */
  headerActions?: ReactNode;
}

export function DetailSection({
  title,
  description,
  children,
  collapsible = false,
  defaultOpen = true,
  className,
  headerActions,
}: DetailSectionProps) {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  const handleToggle = () => {
    if (collapsible) {
      setIsOpen(!isOpen);
    }
  };

  return (
    <Card className={cn('', className)}>
      <CardHeader
        className={cn(
          'pb-4',
          collapsible && 'cursor-pointer select-none'
        )}
        onClick={collapsible ? handleToggle : undefined}
      >
        <div className="flex items-center justify-between">
          <div className="flex-1">
            <CardTitle className="text-base flex items-center gap-2">
              {title}
              {collapsible && (
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-6 w-6 p-0"
                  onClick={(e) => {
                    e.stopPropagation();
                    handleToggle();
                  }}
                >
                  {isOpen ? (
                    <ChevronUp className="h-4 w-4" />
                  ) : (
                    <ChevronDown className="h-4 w-4" />
                  )}
                </Button>
              )}
            </CardTitle>
            {description && (
              <p className="text-sm text-muted-foreground mt-1">{description}</p>
            )}
          </div>
          {headerActions && (
            <div onClick={(e) => e.stopPropagation()}>{headerActions}</div>
          )}
        </div>
      </CardHeader>
      {(!collapsible || isOpen) && (
        <CardContent className="pt-0">{children}</CardContent>
      )}
    </Card>
  );
}

export default DetailSection;
