import Icon from './Icon';

export default function RateCard({ provider, rate, href, isBest, index, formatCurrency, logo }) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className={`rate-card ${isBest ? 'is-best' : ''}`}
      style={{ animationDelay: `${index * 60}ms` }}
    >
      <div className="rate-card-header">
        <div className="provider-info">
          {logo && <img src={logo} alt="" className="provider-logo" />}
          <h3 className="provider-name">{provider}</h3>
        </div>
        {isBest && <span className="pill pill-accent">Best rate</span>}
      </div>

      <div className="rate-value">{formatCurrency(rate)}</div>

      <div className="rate-card-footer">
        <span>Visit provider</span>
        <Icon name="arrowUpRight" size={16} className="rate-arrow" />
      </div>
    </a>
  );
}