"use client";
import {
  Panel,
  PreviewNotice,
} from "@/components/shared/page";
import { usePeople } from "./people-provider";
import { usePreviewRole } from "@/components/layout/preview-context";
import { canManage } from "@/lib/preview";
import { CustomerDetailView } from "./customer-detail-view";
export function CustomerDetail({ id }: { id: string }) {
  const { people } = usePeople(),
    role = usePreviewRole();
  const person = people.find((p) => p.id === id && p.role === "Customer");
  if (!canManage(role))
    return (
      <PreviewNotice>
        This preview identity cannot view customer accounts.
      </PreviewNotice>
    );
  if (!person)
    return (
      <Panel title="Customer unavailable">
        <p className="p-6">No fixture customer exists with this ID.</p>
      </Panel>
    );
  return (
    <CustomerDetailView
      customer={{
        id: person.id,
        firstName: person.firstName,
        lastName: person.lastName,
        email: person.email,
        phone: person.phone,
        active: person.status === "Active",
        role: "user",
        createdAt: "",
        address: {
          streetAndNumber: person.address,
          city: person.city,
          state: "",
          postalCode: "",
          country: person.country,
        },
        basicInformation: {
          dateOfBirth: "",
          placeOfBirth: "",
          gender: "",
        },
        walletBalance: person.balance,
        walletCurrency: "IDR",
        walletActive: person.status === "Active",
      }}
      source="preview"
    />
  );
}