import { NumericFormat } from 'react-number-format';
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 = ({
  tid,
  pname,
  userid,
  idate,
  kind,
  amount
}: ListItemProps) => {
  const { navigate } = useNavigate();
  
  const onClickToNavigate = () => {
    navigate(PATHS.tax.invoice.detail, {
      state: {
        tid: tid
      }
    });
  };
  

  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">{ pname } ({ userid })</div>
          <div className="transaction-details">
            <span>{ moment(idate).format('YYYY.MM.DD') }</span>
            <span className="separator">|</span>
            <span>{ kind }</span>
          </div>
        </div>
        <div className="transaction-amount">
          <NumericFormat
            value={ amount } 
            thousandSeparator
            displayType="text"
            suffix={ '원' }
          ></NumericFormat> 
        </div>
      </div>
    </>
  );
};
