"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

interface TimezoneOption {
  value: string;
  label: string;
}

const defaultTimezones: TimezoneOption[] = [
  { value: "America/New_York", label: "Eastern Time (US)" },
  { value: "America/Chicago", label: "Central Time (US)" },
  { value: "America/Denver", label: "Mountain Time (US)" },
  { value: "America/Los_Angeles", label: "Pacific Time (US)" },
  { value: "Europe/London", label: "London (GMT)" },
  { value: "Europe/Paris", label: "Paris (CET)" },
  { value: "Europe/Berlin", label: "Berlin (CET)" },
  { value: "Asia/Tokyo", label: "Tokyo (JST)" },
  { value: "Asia/Shanghai", label: "Shanghai (CST)" },
  { value: "Australia/Sydney", label: "Sydney (AEST)" },
];

interface AccountSettingsFormProps {
  className?: string;
  timezones?: TimezoneOption[];
  defaultValues?: {
    name?: string;
    email?: string;
    timezone?: string;
    avatarUrl?: string;
  };
  onSubmit?: (values: {
    name: string;
    email: string;
    timezone: string;
    avatarUrl: string;
  }) => void;
}

export function AccountSettingsForm({
  className,
  timezones = defaultTimezones,
  defaultValues,
  onSubmit,
}: AccountSettingsFormProps) {
  const [name, setName] = React.useState(defaultValues?.name ?? "");
  const [email, setEmail] = React.useState(defaultValues?.email ?? "");
  const [timezone, setTimezone] = React.useState(defaultValues?.timezone ?? "America/New_York");
  const [avatarUrl, setAvatarUrl] = React.useState(defaultValues?.avatarUrl ?? "");

  const fileInputRef = React.useRef<HTMLInputElement>(null);

  const handleAvatarClick = () => {
    fileInputRef.current?.click();
  };

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const objectUrl = URL.createObjectURL(file);
      setAvatarUrl(objectUrl);
    }
  };

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    onSubmit?.({ name, email, timezone, avatarUrl });
  };

  return (
    <form
      className={cn("rounded-xl border border-border bg-card p-6", className)}
      onSubmit={handleSubmit}
    >
      <div className="mb-6">
        <h3 className="text-lg font-semibold text-foreground">Account settings</h3>
        <p className="text-sm text-muted-foreground">
          Update your profile information and preferences.
        </p>
      </div>

      {/* Avatar upload */}
      <div className="mb-6 flex items-center gap-4">
        <button
          type="button"
          onClick={handleAvatarClick}
          className={cn(
            "relative flex h-20 w-20 items-center justify-center overflow-hidden rounded-full",
            "border-2 border-border bg-muted"
          )}
        >
          {avatarUrl ? (
            <img
              src={avatarUrl}
              alt="Avatar"
              className="h-full w-full object-cover"
            />
          ) : (
            <UserIcon className="h-8 w-8 text-muted-foreground" />
          )}
          <span className="absolute inset-0 flex items-center justify-center bg-background/60 opacity-0 transition hover:opacity-100">
            <CameraIcon className="h-6 w-6 text-foreground" />
          </span>
        </button>
        <input
          ref={fileInputRef}
          type="file"
          accept="image/*"
          onChange={handleFileChange}
          className="sr-only"
        />
        <div>
          <p className="text-sm font-medium text-foreground">Profile photo</p>
          <p className="text-xs text-muted-foreground">JPG, PNG, or GIF. Max 2MB.</p>
        </div>
      </div>

      {/* Name */}
      <div className="mb-4">
        <label
          htmlFor="account-name"
          className="mb-1 block text-sm font-medium text-foreground"
        >
          Display name
        </label>
        <input
          id="account-name"
          type="text"
          value={name}
          onChange={(event) => setName(event.target.value)}
          placeholder="Your name"
          className={cn(
            "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground",
            "placeholder:text-muted-foreground focus-visible:outline-none"
          )}
        />
      </div>

      {/* Email */}
      <div className="mb-4">
        <label
          htmlFor="account-email"
          className="mb-1 block text-sm font-medium text-foreground"
        >
          Email address
        </label>
        <input
          id="account-email"
          type="email"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
          placeholder="you@example.com"
          className={cn(
            "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground",
            "placeholder:text-muted-foreground focus-visible:outline-none"
          )}
        />
      </div>

      {/* Timezone */}
      <div className="mb-6">
        <label
          htmlFor="account-timezone"
          className="mb-1 block text-sm font-medium text-foreground"
        >
          Timezone
        </label>
        <div className="relative">
          <select
            id="account-timezone"
            value={timezone}
            onChange={(event) => setTimezone(event.target.value)}
            className={cn(
              "w-full appearance-none rounded-lg border border-border bg-background px-3 py-2 pr-8 text-sm text-foreground",
              "focus-visible:outline-none"
            )}
          >
            {timezones.map((tz) => (
              <option key={tz.value} value={tz.value}>
                {tz.label}
              </option>
            ))}
          </select>
          <ChevronIcon className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        </div>
      </div>

      <button
        type="submit"
        className={cn(
          "rounded-lg border border-border bg-muted px-4 py-2 text-sm font-medium text-primary transition",
          "hover:bg-background"
        )}
      >
        Save changes
      </button>
    </form>
  );
}

function UserIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      className={className}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle cx="12" cy="8" r="4" />
      <path d="M4 20c0-4 4-6 8-6s8 2 8 6" />
    </svg>
  );
}

function CameraIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      className={className}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.6"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M14.5 4h-5L7 7H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-3l-2.5-3z" />
      <circle cx="12" cy="13" r="3" />
    </svg>
  );
}

function ChevronIcon({ className }: { className?: string }) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 24 24"
      className={className}
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M6 9l6 6 6-6" />
    </svg>
  );
}
Account Settings Form

Account settings

Dependencies

Files

Installation
