"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Loader2, Scan } from "lucide-react";

interface ScanFormProps {
  onScan: (targetPath: string) => Promise<void>;
  isScanning: boolean;
}

export function ScanForm({ onScan, isScanning }: ScanFormProps) {
  const [targetPath, setTargetPath] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!targetPath.trim() || isScanning) return;
    await onScan(targetPath.trim());
  };

  return (
    <form onSubmit={handleSubmit} className="flex gap-4 items-end">
      <div className="flex-1">
        <label htmlFor="target-path" className="block text-sm font-medium text-foreground mb-2">
          Project Path
        </label>
        <Input
          id="target-path"
          placeholder="/path/to/your/project"
          value={targetPath}
          onChange={(e) => setTargetPath(e.target.value)}
          disabled={isScanning}
        />
      </div>
      <Button type="submit" disabled={isScanning || !targetPath.trim()}>
        {isScanning ? (
          <>
            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
            Scanning...
          </>
        ) : (
          <>
            <Scan className="h-4 w-4 mr-2" />
            Run Scan
          </>
        )}
      </Button>
    </form>
  );
}
