/**
 * FormHeader - 품목 폼 헤더 컴포넌트
 */

import { Button } from '@/components/ui/button';
import { Package, Save, X } from 'lucide-react';
import type { ItemType } from '@/types/item';

interface FormHeaderProps {
  mode: 'create' | 'edit';
  selectedItemType: ItemType | '';
  isSubmitting: boolean;
  onCancel: () => void;
}

export default function FormHeader({
  mode,
  selectedItemType,
  isSubmitting,
  onCancel,
}: FormHeaderProps) {
  return (
    <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
      <div className="flex items-start gap-3">
        <div className="p-2 bg-primary/10 rounded-lg hidden md:block">
          <Package className="w-6 h-6 text-primary" />
        </div>
        <div>
          <h1 className="text-xl md:text-2xl">
            {mode === 'create' ? '품목 등록' : '품목 수정'}
          </h1>
          <p className="text-sm text-muted-foreground mt-1">
            품목 정보를 입력하세요
          </p>
        </div>
      </div>

      <div className="flex gap-1 sm:gap-2">
        <Button
          type="button"
          variant="outline"
          size="sm"
          onClick={onCancel}
          className="gap-1 sm:gap-2"
          disabled={isSubmitting}
        >
          <X className="h-4 w-4" />
          <span className="hidden sm:inline">취소</span>
        </Button>
        <Button
          type="submit"
          size="sm"
          disabled={!selectedItemType || isSubmitting}
          className="gap-1 sm:gap-2"
        >
          <Save className="h-4 w-4" />
          <span className="hidden sm:inline">{isSubmitting ? '저장 중...' : '저장'}</span>
        </Button>
      </div>
    </div>
  );
}