/**
 * 驗收頁面 - 底部操作按鈕列
 * 手機版固定於底部，桌面版則正常排版
 */

import { PackageCheck } from "lucide-react";
import { Button } from "../ui/button";

interface InspectionActionBarProps {
  onCancel: () => void;
  onComplete: () => void;
}

export function InspectionActionBar({ onCancel, onComplete }: InspectionActionBarProps) {
  return (
    <>
      {/* 手機版：固定於底部 */}
      <div className="fixed bottom-0 left-0 right-0 bg-card border-t-2 border-border p-4 md:hidden z-10">
        <div className="flex gap-4">
          <Button
            variant="outline"
            onClick={onCancel}
            className="flex-1 h-12 button-outlined-primary"
          >
            取消
          </Button>
          <Button
            onClick={onComplete}
            className="flex-1 h-12 gap-2 button-filled-primary"
          >
            <PackageCheck className="h-5 w-5" />
            確認驗收
          </Button>
        </div>
      </div>

      {/* 桌面版：正常排版於區塊底部 */}
      <div className="hidden md:flex justify-end gap-4 pt-6 border-t-2 border-border">
        <Button
          variant="outline"
          onClick={onCancel}
          className="h-12 button-outlined-primary"
        >
          取消
        </Button>
        <Button
          onClick={onComplete}
          className="h-12 gap-2 button-filled-primary"
        >
          <PackageCheck className="h-5 w-5" />
          確認驗收並完成
        </Button>
      </div>
    </>
  );
}