import React, { memo } from 'react';
import { formatCurrency } from '@/utils/formatters';

interface DealCardProps {
  deal: {
    id: string;
    title: string;
    value: number;
    probability: number;
    customer: {
      name: string;
      company: string;
    };
  };
  onDragStart: () => void;
}

const DealCard: React.FC<DealCardProps> = memo(({ deal, onDragStart }) => {
  return (
    <div
      className="bg-white p-4 rounded-md shadow-sm mb-3 cursor-move"
      draggable
      onDragStart={onDragStart}
      role="article"
      aria-label={`Deal: ${deal.title}`}
    >
      <h3 className="font-medium text-lg">{deal.title}</h3>
      <div className="text-sm text-gray-600 mt-2">
        <p>{deal.customer.company}</p>
        <p className="mt-1">{formatCurrency(deal.value)}</p>
        <div className="flex items-center mt-2">
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div
              className="bg-blue-600 h-2 rounded-full"
              style={{ width: `${deal.probability}%` }}
              role="progressbar"
              aria-valuenow={deal.probability}
              aria-valuemin={0}
              aria-valuemax={100}
            />
          </div>
          <span className="ml-2 text-xs">{deal.probability}%</span>
        </div>
      </div>
    </div>
  );
});

DealCard.displayName = 'DealCard';

export { DealCard };