'use client';

import React from 'react';
import clsx from 'clsx';

type Props = {
  status: string;
  className?: string;
};

const getStatusConfig = (status: string): { text: string; color: string } => {
  const statusUpper = status.toUpperCase();
  
  const statusMap: Record<string, { text: string; color: string }> = {
    'SUCCESS': { text: 'موفق', color: 'bg-[#00BA4B]' },
    'FAILED': { text: 'ناموفق', color: 'bg-red-500' },
    'PENDING': { text: 'در انتظار', color: 'bg-yellow-500' },
    'CANCELLED': { text: 'لغو شده', color: 'bg-gray-500' },
    'PAID': { text: 'پرداخت شده', color: 'bg-[#00BA4B]' },
    'REFUNDED': { text: 'بازگشت شده', color: 'bg-gray-500' },
  };

  return statusMap[statusUpper] || { text: status, color: 'bg-transparent border border-primary' };
};

function Status({ status, className = '' }: Props) {
  const { text, color } = getStatusConfig(status);

  return (
    <div className={clsx('flex items-center gap-x-2', className)}>
      <span
        className={clsx(
          'size-2 rounded-full',
          color
        )}
      ></span>
      {text}
    </div>
  );
}

export default Status;

