"use client";
import { useState } from "react";
import { officeLabel } from "@/lib/format";

export function FindForm({ q, office, available, size, examples }: { q: string; office?: string; available: boolean; size: number; examples: string[] }) {
  const [text, setText] = useState(q);
  return (
    <form method="get" className="max-w-3xl space-y-4">
      <textarea
        name="q" value={text} onChange={(e) => setText(e.target.value)} rows={4}
        placeholder="e.g. Pitch for a cruise line: brand platform, hero film, paid social in North America. Needs someone who's done travel before."
        className="w-full rounded-2xl bg-white/10 border border-white/15 px-5 py-4 text-base placeholder:text-white/40 focus:outline-none focus:border-soul"
      />
      <div className="flex flex-wrap items-center gap-3 text-sm">
        <select name="office" defaultValue={office ?? ""} className="rounded-full bg-white/10 border border-white/15 px-4 py-2 text-white [&>option]:text-ink">
          <option value="">Any office</option>
          {Object.entries(officeLabel).map(([k, v]) => <option key={k} value={k}>{v}</option>)}
        </select>
        <label className="flex items-center gap-2 rounded-full bg-white/10 border border-white/15 px-4 py-2">
          Team of
          <select name="size" defaultValue={size} className="bg-transparent [&>option]:text-ink">{[3, 4, 5, 6, 7, 8].map((n) => <option key={n}>{n}</option>)}</select>
        </label>
        <label className="flex items-center gap-2 rounded-full bg-white/10 border border-white/15 px-4 py-2 cursor-pointer">
          <input type="checkbox" name="available" value="1" defaultChecked={available} className="accent-soul" /> Prefer people with capacity
        </label>
        <button className="btn btn-soul ml-auto">Rank the team →</button>
      </div>
      <div className="flex flex-wrap gap-2 pt-1">
        <span className="text-xs text-white/50 self-center">Try:</span>
        {examples.map((e) => (
          <button type="button" key={e} onClick={() => setText(e)} className="text-left text-xs rounded-full border border-white/15 px-3 py-1 text-white/70 hover:border-soul hover:text-white max-w-xs truncate" title={e}>{e}</button>
        ))}
      </div>
    </form>
  );
}