/**
 * FormActions - 폼 하단 액션 버튼 그룹
 */

import { ReactNode } from "react";
import { Button } from "../ui/button";
import { Save, X } from "lucide-react";

export interface FormActionsProps {
  onSave?: () => void;
  onCancel?: () => void;
  saveLabel?: string;
  cancelLabel?: string;
  saveDisabled?: boolean;
  cancelDisabled?: boolean;
  saveLoading?: boolean;
  children?: ReactNode;
  className?: string;
  align?: 'left' | 'center' | 'right';
}

export function FormActions({
  onSave,
  onCancel,
  saveLabel = "저장",
  cancelLabel = "취소",
  saveDisabled = false,
  cancelDisabled = false,
  saveLoading = false,
  children,
  className = "",
  align = 'right',
}: FormActionsProps) {

  const alignClasses = {
    left: "justify-start",
    center: "justify-center",
    right: "justify-end",
  };

  return (
    <div className={`flex flex-col md:flex-row gap-3 ${alignClasses[align]} ${className}`}>
      {children ? (
        children
      ) : (
        <>
          {onCancel && (
            <Button
              type="button"
              variant="outline"
              onClick={onCancel}
              disabled={cancelDisabled}
              className="w-full md:w-auto"
            >
              <X className="h-4 w-4 mr-2" />
              {cancelLabel}
            </Button>
          )}
          {onSave && (
            <Button
              type="button"
              onClick={onSave}
              disabled={saveDisabled || saveLoading}
              className="w-full md:w-auto"
            >
              <Save className="h-4 w-4 mr-2" />
              {saveLoading ? "저장 중..." : saveLabel}
            </Button>
          )}
        </>
      )}
    </div>
  );
}