lead-scraper/components/search/SearchCard.tsx

"use client";

import { ExamplePills } from "./ExamplePills";

interface SearchCardProps {
  query: string;
  region: string;
  count: number;
  loading: boolean;
  onChange: (field: "query" | "region" | "count", value: string | number) => void;
  onSubmit: () => void;
}

export function SearchCard({ query, region, count, loading, onChange, onSubmit }: SearchCardProps) {
  const canSubmit = query.trim().length > 0 && !loading;

  return (
    <div
      style={{
        background: "#111118",
        border: "1px solid #1e1e2e",
        borderRadius: 12,
        padding: 24,
        opacity: loading ? 0.55 : 1,
        pointerEvents: loading ? "none" : "auto",
        transition: "opacity 0.2s",
      }}
    >
      {/* 3-column grid */}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr 120px",
          gap: 12,
          marginBottom: 16,
        }}
      >
        {/* Suchbegriff */}
        <div>
          <label
            style={{
              display: "block",
              fontSize: 11,
              fontWeight: 500,
              color: "#6b7280",
              textTransform: "uppercase",
              letterSpacing: "0.05em",
              marginBottom: 6,
            }}
          >
            Suchbegriff
          </label>
          <input
            type="text"
            value={query}
            onChange={(e) => onChange("query", e.target.value)}
            onKeyDown={(e) => { if (e.key === "Enter" && canSubmit) onSubmit(); }}
            placeholder="z.B. Dachdecker, Solaranlage, Steuerberater…"
            style={{
              width: "100%",
              background: "#0d0d18",
              border: "1px solid #1e1e2e",
              borderRadius: 8,
              padding: "9px 12px",
              fontSize: 14,
              color: "#ffffff",
              outline: "none",
              boxSizing: "border-box",
              transition: "border-color 0.15s",
            }}
            onFocus={(e) => { e.currentTarget.style.borderColor = "#3b82f6"; }}
            onBlur={(e) => { e.currentTarget.style.borderColor = "#1e1e2e"; }}
          />
        </div>

        {/* Region */}
        <div>
          <label
            style={{
              display: "block",
              fontSize: 11,
              fontWeight: 500,
              color: "#6b7280",
              textTransform: "uppercase",
              letterSpacing: "0.05em",
              marginBottom: 6,
            }}
          >
            Region
          </label>
          <input
            type="text"
            value={region}
            onChange={(e) => onChange("region", e.target.value)}
            onKeyDown={(e) => { if (e.key === "Enter" && canSubmit) onSubmit(); }}
            placeholder="z.B. Bayern, München, Deutschland"
            style={{
              width: "100%",
              background: "#0d0d18",
              border: "1px solid #1e1e2e",
              borderRadius: 8,
              padding: "9px 12px",
              fontSize: 14,
              color: "#ffffff",
              outline: "none",
              boxSizing: "border-box",
              transition: "border-color 0.15s",
            }}
            onFocus={(e) => { e.currentTarget.style.borderColor = "#3b82f6"; }}
            onBlur={(e) => { e.currentTarget.style.borderColor = "#1e1e2e"; }}
          />
        </div>

        {/* Anzahl */}
        <div>
          <label
            style={{
              display: "block",
              fontSize: 11,
              fontWeight: 500,
              color: "#6b7280",
              textTransform: "uppercase",
              letterSpacing: "0.05em",
              marginBottom: 6,
            }}
          >
            Anzahl
          </label>
          <select
            value={count}
            onChange={(e) => onChange("count", Number(e.target.value))}
            style={{
              width: "100%",
              background: "#0d0d18",
              border: "1px solid #1e1e2e",
              borderRadius: 8,
              padding: "9px 12px",
              fontSize: 14,
              color: "#ffffff",
              outline: "none",
              cursor: "pointer",
              boxSizing: "border-box",
            }}
          >
            <option value={25}>25 Leads</option>
            <option value={50}>50 Leads</option>
            <option value={100}>100 Leads</option>
            <option value={200}>200 Leads</option>
          </select>
        </div>
      </div>

      {/* Submit button */}
      <button
        onClick={onSubmit}
        disabled={!canSubmit}
        style={{
          width: "100%",
          background: canSubmit ? "linear-gradient(135deg, #3b82f6, #8b5cf6)" : "#1e1e2e",
          color: canSubmit ? "#ffffff" : "#6b7280",
          border: "none",
          borderRadius: 10,
          padding: "12px 16px",
          fontSize: 14,
          fontWeight: 500,
          cursor: canSubmit ? "pointer" : "not-allowed",
          opacity: canSubmit ? 1 : 0.5,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          gap: 8,
          marginBottom: 20,
          transition: "opacity 0.15s",
        }}
      >
        {/* Magnifying glass icon */}
        <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
          <circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" strokeWidth="1.5" />
          <line x1="10.5" y1="10.5" x2="13.5" y2="13.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
        Leads suchen
      </button>

      {/* Divider */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 12,
          marginBottom: 16,
        }}
      >
        <div style={{ flex: 1, height: 1, background: "#1e1e2e" }} />
        <span style={{ fontSize: 12, color: "#6b7280", flexShrink: 0 }}>Beispielsuche</span>
        <div style={{ flex: 1, height: 1, background: "#1e1e2e" }} />
      </div>

      {/* Example pills */}
      <ExamplePills
        onSelect={(q, r) => {
          onChange("query", q);
          onChange("region", r);
        }}
      />
    </div>
  );
}