'use client';

import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/components/ui/utils';
import type { CalendarHeaderProps, CalendarView } from './types';
import { formatYearMonth } from './utils';

/**
 * 달력 헤더 컴포넌트
 * - 년월 표시 및 네비게이션 (◀ ▶)
 * - 주/월 뷰 전환 탭
 * - 필터 slot (children으로 외부 주입)
 */
export function CalendarHeader({
  currentDate,
  view,
  onPrevMonth,
  onNextMonth,
  onViewChange,
  titleSlot,
  filterSlot,
}: CalendarHeaderProps) {
  const views: { value: CalendarView; label: string }[] = [
    { value: 'week', label: '주' },
    { value: 'month', label: '월' },
  ];

  return (
    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between pb-3 border-b">
      {/* 좌측: 타이틀 + 년월 네비게이션 */}
      <div className="flex items-center gap-4">
        {titleSlot && (
          <span className="text-base font-semibold text-foreground">{titleSlot}</span>
        )}
        <div className="flex items-center gap-2">
          <Button
            variant="outline"
            size="icon"
            className="h-8 w-8 shrink-0 hover:bg-primary/10"
            onClick={onPrevMonth}
          >
            <ChevronLeft className="h-4 w-4" />
          </Button>

          <span className="text-lg font-bold min-w-[120px] text-center">
            {formatYearMonth(currentDate)}
          </span>

          <Button
            variant="outline"
            size="icon"
            className="h-8 w-8 shrink-0 hover:bg-primary/10"
            onClick={onNextMonth}
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>
      </div>

      {/* 우측: 뷰 전환 + 필터 */}
      <div className="flex items-center gap-3">
        {/* 뷰 전환 탭 */}
        <div className="flex rounded-md border">
          {views.map((v) => (
            <button
              key={v.value}
              onClick={() => onViewChange(v.value)}
              className={cn(
                'px-4 py-1.5 text-sm font-medium transition-colors',
                'first:rounded-l-md last:rounded-r-md',
                view === v.value
                  ? 'bg-primary text-primary-foreground'
                  : 'hover:bg-primary/10 text-foreground'
              )}
            >
              {v.label}
            </button>
          ))}
        </div>

        {/* 필터 슬롯 */}
        {filterSlot && <div className="flex items-center gap-2">{filterSlot}</div>}
      </div>
    </div>
  );
}