'use client';

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import Divider from '@mui/material/Divider';
import { CreditCard as CreditCardIcon } from '@phosphor-icons/react/dist/ssr/CreditCard';
import { PencilSimple as PencilSimpleIcon } from '@phosphor-icons/react/dist/ssr/PencilSimple';
import { useTranslation } from 'react-i18next';

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

import { SamplePayments } from './SamplePayments';

export default function SamplePaymentCard(): React.JSX.Element {
  const { t } = useTranslation();
  return (
    <>
      <Payments ordersValue={2069.48} payments={SamplePayments} refundsValue={324.5} totalOrders={5} />
      <Card>
        <CardHeader
          action={
            <Button color="secondary" startIcon={<PencilSimpleIcon />}>
              {t('list.edit')}
            </Button>
          }
          avatar={
            <Avatar>
              <CreditCardIcon fontSize="var(--Icon-fontSize)" />
            </Avatar>
          }
          title={t('list.billing-details')}
        />
        <CardContent>
          <Card sx={{ borderRadius: 1 }} variant="outlined">
            <PropertyList divider={<Divider />} sx={{ '--PropertyItem-padding': '16px' }}>
              {(
                [
                  { key: t('Credit card'), value: '**** 4142' },
                  { key: t('Country'), value: t('United States') },
                  { key: t('State'), value: t('Michigan') },
                  { key: t('City'), value: t('Southfield') },
                  { key: t('Address'), value: t('Address') },
                  { key: t('Tax ID'), value: t('Tax ID') },
                ] satisfies { key: string; value: React.ReactNode }[]
              ).map(
                (item): React.JSX.Element => (
                  <PropertyItem key={item.key} name={item.key} value={item.value} />
                )
              )}
            </PropertyList>
          </Card>
        </CardContent>
      </Card>
    </>
  );
}
