import AppDescriptions from '@/components/ui/descriptions';
import { getCustomerDetail } from '@/lib/redux/features/customer';
import { useAppSelector } from '@/lib/redux/hooks';
import React, { useEffect } from 'react';

const ViewCustomerDetail = () => {
  const customerDetail = useAppSelector(getCustomerDetail);
  const [customerInfoItems, setCustomerInfoItems] = React.useState<any[]>([]);

  useEffect(() => {
    if (customerDetail) {
      setCustomerInfoItems([
        {
          key: 'name',
          label: 'Name',
          children: `${customerDetail?.firstName} ${customerDetail?.lastName}`,
          span: 2,
        },
        {
          key: 'email',
          label: 'Email',
          children: customerDetail?.email,
          span: 2,
        },
      ]);
    }
  }, [customerDetail]);

  return (
    <div>
      <AppDescriptions items={customerInfoItems} column={2} size="small" />
    </div>
  );
};

export default ViewCustomerDetail;