'use client';

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import Chip from '@mui/material/Chip';
import Divider from '@mui/material/Divider';
import IconButton from '@mui/material/IconButton';
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
import { User as UserIcon } from '@phosphor-icons/react/dist/ssr/User';
import { useTranslation } from 'react-i18next';

import { PropertyItem } from '@/components/core/property-item';
import { PropertyList } from '@/components/core/property-list';
import { LpCategory } from '@/components/dashboard/lp_categories/type';

export default function BasicDetailCard({
  lpModel: model,
  handleEditClick,
}: {
  lpModel: LpCategory;
  handleEditClick: () => void;
}): React.JSX.Element {
  const { t } = useTranslation();

  return (
    <Card>
      <CardHeader
        action={
          <IconButton
            onClick={() => {
              handleEditClick();
            }}
          >
            <PencilSimpleIcon />
          </IconButton>
        }
        avatar={
          <Avatar>
            <UserIcon fontSize="var(--Icon-fontSize)" />
          </Avatar>
        }
        title={t('list.basic-details')}
      />
      <PropertyList
        divider={<Divider />}
        orientation="vertical"
        sx={{ '--PropertyItem-padding': '12px 24px' }}
      >
        {(
          [
            {
              key: 'Customer ID',
              value: (
                <Chip
                  label={model.id}
                  size="small"
                  variant="soft"
                />
              ),
            },
            { key: 'Name', value: model.cat_name },
            { key: 'Remarks', value: model.remarks },
            { key: 'Description', value: model.description },
          ] satisfies { key: string; value: React.ReactNode }[]
        ).map(
          (item): React.JSX.Element => (
            <PropertyItem
              key={item.key}
              name={item.key}
              value={item.value}
            />
          )
        )}
      </PropertyList>
    </Card>
  );
}
