import React from 'react';

interface QuoteSummaryRowProps {
  supplierName: string;
  priceLabel: string;
  deliveryOption: string;
  status: string;
  onClick?: () => void;
}

const QuoteSummaryRow: React.FC<QuoteSummaryRowProps> = ({
  supplierName,
  priceLabel,
  deliveryOption,
  status,
  onClick,
}) => {
  return (
    <div
      onClick={onClick}
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '4px',
        padding: '12px 0',
        borderBottom: '1px solid var(--color-border)',
        cursor: onClick ? 'pointer' : 'default',
      }}
    >
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <span
          style={{
            fontSize: '15px',
            fontWeight: '600',
            color: 'var(--color-text-primary)',
          }}
        >
          {supplierName}
        </span>
        <span
          style={{
            fontSize: '15px',
            fontWeight: '600',
            color: 'var(--color-brand-strong)',
          }}
        >
          {priceLabel}
        </span>
      </div>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        <span
          style={{
            fontSize: '13px',
            fontWeight: '400',
            color: 'var(--color-text-secondary)',
          }}
        >
          {deliveryOption}
        </span>
        <span
          style={{
            fontSize: '12px',
            fontWeight: '600',
            color:
              status === 'accepted'
                ? 'var(--color-success-text)'
                : 'var(--color-text-secondary)',
            textTransform: 'capitalize',
          }}
        >
          {status}
        </span>
      </div>
    </div>
  );
};

export default QuoteSummaryRow;