"use client";

import { useState } from "react";

export default function RoleToggle() {
  const [role, setRole] = useState<"tenant" | "landlord">("tenant");

  return (
    <div className="mb-5">
      <span className="block font-mono text-xs uppercase tracking-widest text-ink-soft mb-2">
        I want to
      </span>
      <input type="hidden" name="role" value={role} />
      <div className="grid grid-cols-2 gap-3">
        <button
          type="button"
          onClick={() => setRole("tenant")}
          className={`text-left border rounded-md p-4 transition-colors ${
            role === "tenant"
              ? "border-forest bg-[#E8F2EC]"
              : "border-mist bg-white hover:border-forest"
          }`}
        >
          <div className="font-display font-semibold text-forest-deep mb-1">Find a home</div>
          <div className="text-xs text-ink-soft">Browse and save verified listings</div>
        </button>
        <button
          type="button"
          onClick={() => setRole("landlord")}
          className={`text-left border rounded-md p-4 transition-colors ${
            role === "landlord"
              ? "border-forest bg-[#E8F2EC]"
              : "border-mist bg-white hover:border-forest"
          }`}
        >
          <div className="font-display font-semibold text-forest-deep mb-1">List a property</div>
          <div className="text-xs text-ink-soft">Submit listings for verification</div>
        </button>
      </div>

      {role === "landlord" && (
        <p className="text-xs text-ink-soft mt-3">
          Landlord accounts require identity verification before you can list properties.
          You&apos;ll be guided through the KYC process after sign-up.
        </p>
      )}
    </div>
  );
}