import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import moment from 'moment';

interface LinkPaymentItemProps {
  transactionId: string;
  customerName: string;
  status: string;
  channel: string;
  paymentMethod: string;
  amount: number;
}

export const LinkPaymentItem = ({
  transactionId,
  customerName,
  status,
  channel,
  paymentMethod,
  amount
}: LinkPaymentItemProps) => {
  const { navigate } = useNavigate();
  
  const onClickToNavigate = () => {
    navigate(PATHS.additionalService.linkPayment.detail, {
      state: {
        transactionId: transactionId
      }
    });
  };
  
  const getStatusDotClass = () => {
    if (status === '결제완료' || status === '입금요청') {
      return 'status-dot blue';
    }
    return 'status-dot gray';
  };

  return (
    <>
      <div 
        className="transaction-item approved"
        onClick={() => onClickToNavigate()}
      >
        <div className="transaction-status">
          <div className={getStatusDotClass()}></div>
        </div>
        <div className="transaction-content">
          <div className="transaction-title">{customerName}</div>
          <div className="transaction-details">
            <span>{status}</span>
            <span className="separator">ㅣ</span>
            <span>{channel}</span>
            <span className="separator">ㅣ</span>
            <span>{paymentMethod}</span>
          </div>
        </div>
        <div className="transaction-amount">{amount.toLocaleString()}원</div>
      </div>
    </>
  );
};