import React from 'react';

import type { IAgentAnalyticsTrend } from '../../service/agent-analytics/agent-analytics.interface';

interface TrendBadgeProps {
  delta?: IAgentAnalyticsTrend;
}

const TrendBadge = ({ delta }: TrendBadgeProps): JSX.Element => {
  if (!delta || delta.delta_pct === 0) {
    return <span className="text-sm text-gray-500">--</span>;
  }

  const up = delta.delta_pct > 0;
  const arrow = up ? '\u2191' : '\u2193';
  const label = `${arrow} ${Math.abs(delta.delta_pct).toFixed(1)}%`;

  return (
    <span
      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
        up ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
      }`}
    >
      {label}
    </span>
  );
};

export default TrendBadge;