function FilterGroup({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="mb-6">
      <span className="block font-mono text-xs uppercase tracking-widest text-ink-soft mb-3">
        {label}
      </span>
      <div className="flex flex-col gap-2">{children}</div>
    </div>
  );
}

function CheckOption({ label, defaultChecked }: { label: string; defaultChecked?: boolean }) {
  return (
    <label className="flex items-center gap-2 text-sm cursor-pointer">
      <input
        type="checkbox"
        defaultChecked={defaultChecked}
        className="w-4 h-4 accent-forest"
      />
      {label}
    </label>
  );
}

function RadioOption({ label, name, defaultChecked }: { label: string; name: string; defaultChecked?: boolean }) {
  return (
    <label className="flex items-center gap-2 text-sm cursor-pointer">
      <input
        type="radio"
        name={name}
        defaultChecked={defaultChecked}
        className="w-4 h-4 accent-forest"
      />
      {label}
    </label>
  );
}

export default function FiltersPanel() {
  return (
    <aside className="bg-white border border-mist rounded-md p-5 lg:sticky lg:top-[96px]">
      <h3 className="text-base font-semibold mb-4">Filter results</h3>

      <FilterGroup label="Town">
        <CheckOption label="Akim Oda" defaultChecked />
        <CheckOption label="New Tafo" />
        <CheckOption label="Kade" />
        <CheckOption label="Asamankese" />
      </FilterGroup>

      <FilterGroup label="House type">
        <CheckOption label="Single room" />
        <CheckOption label="2 bedroom" />
        <CheckOption label="3 bedroom" />
        <CheckOption label="Compound house" />
      </FilterGroup>

      <FilterGroup label="Price range (GH₵ / month)">
        <RadioOption name="price" label="Under 500" />
        <RadioOption name="price" label="500 – 1,000" />
        <RadioOption name="price" label="1,000 – 2,000" defaultChecked />
        <RadioOption name="price" label="Above 2,000" />
      </FilterGroup>

      <FilterGroup label="Trust">
        <CheckOption label="Verified properties only" defaultChecked />
        <CheckOption label="Verified landlords only" />
      </FilterGroup>

      <button className="w-full inline-flex items-center justify-center font-semibold text-sm px-6 py-3 rounded-pill bg-forest text-white hover:bg-forest-deep transition-colors">
        Apply filters
      </button>
    </aside>
  );
}