'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>
    </>
  );
}