{props.isError ? (
  <div
    className="rounded-xl border border-destructive/20 bg-destructive/5 px-4 py-6 text-center"
    role="alert"
  >
    <p className="font-medium text-destructive text-sm">
      Failed to load profile
    </p>
    <button
      type="button"
      onClick={props.onRetry}
      className="mt-2 font-medium text-destructive text-sm underline underline-offset-4"
    >
      Try again
    </button>
  </div>
) : props.customer ? (
  <div className="space-y-6">
    <div className="flex items-center justify-between">
      <h2 className="text-lg font-semibold">Profile</h2>
      {!props.editing && (
        <button
          type="button"
          onClick={props.onEdit}
          className="text-sm font-medium text-primary hover:underline"
        >
          Edit
        </button>
      )}
    </div>

    {props.message && (
      <p className="text-sm text-muted-foreground">{props.message}</p>
    )}

    {props.editing ? (
      <div className="space-y-4">
        <div className="grid gap-4 sm:grid-cols-2">
          <div>
            <label htmlFor="firstName" className="mb-1 block text-sm font-medium">
              First name
            </label>
            <input
              id="firstName"
              type="text"
              value={props.firstName}
              onChange={(e) => props.onFirstNameChange(e.target.value)}
              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
            />
          </div>
          <div>
            <label htmlFor="lastName" className="mb-1 block text-sm font-medium">
              Last name
            </label>
            <input
              id="lastName"
              type="text"
              value={props.lastName}
              onChange={(e) => props.onLastNameChange(e.target.value)}
              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
            />
          </div>
        </div>
        <div>
          <label htmlFor="phone" className="mb-1 block text-sm font-medium">
            Phone
          </label>
          <input
            id="phone"
            type="tel"
            value={props.phone}
            onChange={(e) => props.onPhoneChange(e.target.value)}
            className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
            placeholder="Optional"
          />
        </div>
        <div className="flex gap-2">
          <button
            type="button"
            onClick={props.onSave}
            disabled={props.saving}
            className="rounded-md bg-foreground px-4 py-2 text-sm font-medium text-background transition-opacity hover:opacity-90 disabled:opacity-50"
          >
            {props.saving ? "Saving..." : "Save"}
          </button>
          <button
            type="button"
            onClick={props.onCancel}
            className="rounded-md border border-border px-4 py-2 text-sm font-medium transition-colors hover:bg-muted"
          >
            Cancel
          </button>
        </div>
      </div>
    ) : (
      <dl className="space-y-3 text-sm">
        <div className="flex justify-between">
          <dt className="text-muted-foreground">Name</dt>
          <dd>{props.customer.firstName} {props.customer.lastName}</dd>
        </div>
        <div className="flex justify-between border-t border-border pt-3">
          <dt className="text-muted-foreground">Email</dt>
          <dd>{props.customer.email}</dd>
        </div>
        {props.customer.phone && (
          <div className="flex justify-between border-t border-border pt-3">
            <dt className="text-muted-foreground">Phone</dt>
            <dd>{props.customer.phone}</dd>
          </div>
        )}
      </dl>
    )}
  </div>
) : (
  <div className="py-8 text-center text-sm text-muted-foreground">
    Loading profile...
  </div>
)}