import { X } from "lucide-react";

export interface MobileSettingsPanelProps {
  readonly modelId: string;
  readonly modelLabel: string;
  readonly onClose: () => void;
  readonly onSignOut?: () => void;
  readonly userEmail?: string;
  readonly userName?: string;
}

export const MobileSettingsPanel = ({
  modelId,
  modelLabel,
  onClose,
  onSignOut,
  userEmail,
  userName,
}: MobileSettingsPanelProps) => (
  <section
    aria-label="Settings"
    className="absolute inset-0 z-50 flex flex-col bg-[#f7f8f5] text-[#11110f]"
  >
    <header className="flex h-20 shrink-0 items-center border-b border-[#e9eae6] bg-white px-4">
      <div>
        <h2 className="text-[18px] font-semibold">Settings</h2>
        <p className="text-[11px] text-[#807b76]">
          Your account and Zopu runtime.
        </p>
      </div>
      <button
        aria-label="Close settings"
        className="ml-auto flex size-10 items-center justify-center rounded-full bg-[#f2f3ef]"
        onClick={onClose}
        type="button"
      >
        <X className="size-5" />
      </button>
    </header>
    <div className="space-y-3 p-4">
      <div className="rounded-[22px] bg-white p-4">
        <p className="text-[10px] font-semibold tracking-[0.08em] text-[#807b76] uppercase">
          Account
        </p>
        <p className="mt-2 text-[15px] font-semibold">
          {userName ?? "Signed-in user"}
        </p>
        {userEmail ? (
          <p className="mt-0.5 text-[12px] text-[#807b76]">{userEmail}</p>
        ) : null}
      </div>
      <div className="rounded-[22px] bg-white p-4">
        <label
          className="text-[10px] font-semibold tracking-[0.08em] text-[#807b76] uppercase"
          htmlFor="mobile-stack-model"
        >
          Chat model
        </label>
        <select
          className="mt-2 h-11 w-full rounded-[14px] bg-[#f2f3ef] px-3 text-[13px] font-semibold outline-none"
          disabled
          id="mobile-stack-model"
          value={modelId}
        >
          <option value={modelId}>{modelLabel}</option>
        </select>
        <p className="mt-2 text-[11px] leading-4 text-[#807b76]">
          The configured OpenRouter model is used for Zopu conversations and
          project work.
        </p>
      </div>
      {onSignOut ? (
        <button
          className="h-12 w-full rounded-[16px] bg-black text-[13px] font-semibold text-white"
          onClick={onSignOut}
          type="button"
        >
          Sign out
        </button>
      ) : null}
    </div>
  </section>
);
