import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListItemProps } from '../model/types';
import moment from 'moment';

export const ListItem = ({
  id,
  companyName,
  mid,
  issueDate,
  paymentMethod,
  amount
}: ListItemProps) => {
  const { t, i18n } = useTranslation();
  const { navigate } = useNavigate();
  
  const onClickToNavigate = () => {
    navigate(PATHS.vatReturn.detail, {
      state: {
        taxInvoiceNumber: id
      }
    });
  };

  return (
    <>
      <div 
        className="transaction-item approved"
        onClick={ () => onClickToNavigate() }
      >
        <div className="transaction-status">
          <div className="status-dot blue"></div>
        </div>
        <div className="transaction-content">
          <div className="transaction-title">{ companyName } ({ mid })</div>
          <div className="transaction-details">
            <span>{ moment(issueDate).format('YYYY.MM.DD') }</span>
            <span className="separator">|</span>
            <span>{ paymentMethod }</span>
          </div>
        </div>
        <div className="transaction-amount">
          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
        </div>
      </div>
    </>
  );
};
                                               