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

interface MetricsProps {
  metrics: {
    totalLeads: number;
    conversion: number;
    revenue: number;
  } | null;
}

export const SalesMetrics: React.FC<MetricsProps> = ({ metrics }) => {
  if (!metrics) return null;

  return (
    <div className="bg-white rounded-lg shadow p-6">
      <h2 className="text-xl font-semibold mb-4">Key Metrics</h2>
      <div className="space-y-4">
        <div>
          <label className="text-gray-600">Total Leads</label>
          <p className="text-2xl font-bold">{metrics.totalLeads}</p>
        </div>
        <div>
          <label className="text-gray-600">Conversion Rate</label>
          <p className="text-2xl font-bold">{metrics.conversion.toFixed(1)}%</p>
        </div>
        <div>
          <label className="text-gray-600">Total Revenue</label>
          <p className="text-2xl font-bold">{formatCurrency(metrics.revenue)}</p>
        </div>
      </div>
    </div>
  );
};
