"use client";

interface ExamplePill {
  label: string;
  query: string;
  region: string;
}

const EXAMPLES: ExamplePill[] = [
  { label: "☀️ Solaranlagen Bayern", query: "Solaranlagen", region: "Bayern" },
  { label: "🔧 Dachdecker NRW", query: "Dachdecker", region: "NRW" },
  { label: "📊 Steuerberater Berlin", query: "Steuerberater", region: "Berlin" },
  { label: "🏗️ Bauunternehmen Süddeutschland", query: "Bauunternehmen", region: "Süddeutschland" },
  { label: "🌿 Landschaftsgärtner Hamburg", query: "Landschaftsgärtner", region: "Hamburg" },
  { label: "🔌 Elektroinstallateur München", query: "Elektroinstallateur", region: "München" },
];

interface ExamplePillsProps {
  onSelect: (query: string, region: string) => void;
}

export function ExamplePills({ onSelect }: ExamplePillsProps) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
      {EXAMPLES.map((ex) => (
        <button
          key={ex.label}
          onClick={() => onSelect(ex.query, ex.region)}
          style={{
            padding: "5px 12px",
            border: "1px solid #2e2e3e",
            borderRadius: 20,
            fontSize: 12,
            color: "#9ca3af",
            background: "transparent",
            cursor: "pointer",
            transition: "all 0.15s",
          }}
          onMouseEnter={(e) => {
            (e.currentTarget as HTMLButtonElement).style.borderColor = "#3b82f6";
            (e.currentTarget as HTMLButtonElement).style.color = "#3b82f6";
          }}
          onMouseLeave={(e) => {
            (e.currentTarget as HTMLButtonElement).style.borderColor = "#2e2e3e";
            (e.currentTarget as HTMLButtonElement).style.color = "#9ca3af";
          }}
        >
          {ex.label}
        </button>
      ))}
    </div>
  );
}