Assist_Design/apps/portal/src/features/account/components/PersonalInfoCard.tsx

"use client";

import { SubCard } from "@/components/molecules/SubCard/SubCard";
import { UserIcon, PencilIcon, CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
import type { UserProfile } from "@customer-portal/domain/customer";
import { Button } from "@/components/atoms/button";
import { Input } from "@/components/atoms/input";

interface PersonalInfoCardProps {
  data: UserProfile;
  isEditing: boolean;
  isSaving: boolean;
  onEdit: () => void;
  onCancel: () => void;
  onChange: (field: "email" | "phonenumber", value: string) => void;
  onSave: () => void;
}

export function PersonalInfoCard({
  data,
  isEditing,
  isSaving,
  onEdit,
  onCancel,
  onChange,
  onSave,
}: PersonalInfoCardProps) {
  return (
    <SubCard>
      <div className="pb-5 border-b border-border">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <UserIcon className="h-6 w-6 text-primary" />
            <h2 className="text-xl font-semibold text-foreground">Personal Information</h2>
          </div>
          {!isEditing && (
            <Button
              variant="outline"
              size="sm"
              onClick={onEdit}
              leftIcon={<PencilIcon className="h-4 w-4" />}
            >
              Edit
            </Button>
          )}
        </div>
      </div>

      <div className="pt-5">
        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
          <div>
            <label className="block text-sm font-medium text-muted-foreground mb-2">
              First Name
            </label>
            <div className="bg-muted rounded-lg p-4 border border-border">
              <p className="text-sm text-foreground font-medium">
                {data.firstname || (
                  <span className="text-muted-foreground italic">Not provided</span>
                )}
              </p>
              <p className="text-xs text-muted-foreground mt-2">
                Name cannot be changed from the portal.
              </p>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-muted-foreground mb-2">
              Last Name
            </label>
            <div className="bg-muted rounded-lg p-4 border border-border">
              <p className="text-sm text-foreground font-medium">
                {data.lastname || (
                  <span className="text-muted-foreground italic">Not provided</span>
                )}
              </p>
              <p className="text-xs text-muted-foreground mt-2">
                Name cannot be changed from the portal.
              </p>
            </div>
          </div>

          <div className="sm:col-span-2">
            <label className="block text-sm font-medium text-muted-foreground mb-3">
              Email Address
            </label>
            {isEditing ? (
              <Input
                type="email"
                value={data.email}
                onChange={e => onChange("email", e.target.value)}
              />
            ) : (
              <div className="bg-muted rounded-lg p-4 border border-border">
                <div className="flex items-center justify-between">
                  <p className="text-base text-foreground font-medium">{data.email}</p>
                </div>
                <p className="text-xs text-muted-foreground mt-2">
                  Email can be updated from the portal.
                </p>
              </div>
            )}
          </div>
        </div>

        {isEditing && (
          <div className="flex items-center justify-end space-x-3 pt-6 border-t border-border mt-6">
            <Button
              variant="outline"
              size="sm"
              onClick={onCancel}
              disabled={isSaving}
              leftIcon={<XMarkIcon className="h-4 w-4" />}
            >
              Cancel
            </Button>
            <Button
              size="sm"
              onClick={onSave}
              disabled={isSaving}
              isLoading={isSaving}
              loadingText="Saving…"
              leftIcon={!isSaving ? <CheckIcon className="h-4 w-4" /> : undefined}
            >
              Save Changes
            </Button>
          </div>
        )}
      </div>
    </SubCard>
  );
}