import React from 'react';
import { IonIcon } from '@ionic/react';
import { checkmarkCircle, ellipseOutline } from 'ionicons/icons';

export interface SupplierOption {
  id: string;
  full_name: string;
  company_name: string | null;
  city: string | null;
}

interface SupplierPickerRowProps {
  supplier: SupplierOption;
  selected: boolean;
  onToggle: () => void;
}

const SupplierPickerRow: React.FC<SupplierPickerRowProps> = ({
  supplier,
  selected,
  onToggle,
}) => {
  return (
    <div
      onClick={onToggle}
      style={{
        display: 'flex',
        alignItems: 'center',
        padding: '12px 0',
        borderBottom: '1px solid #edf4ee',
        cursor: 'pointer',
      }}
    >
      <IonIcon
        icon={selected ? checkmarkCircle : ellipseOutline}
        style={{
          fontSize: '24px',
          color: selected ? '#166534' : '#8a978f',
          marginRight: '12px',
          flexShrink: 0,
        }}
      />
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: '2px',
          flex: 1,
        }}
      >
        <span style={{ fontSize: '15px', fontWeight: '600', color: '#0f1720' }}>
          {supplier.company_name || supplier.full_name}
        </span>
        <span style={{ fontSize: '13px', fontWeight: '400', color: '#6c7a71' }}>
          {supplier.company_name ? supplier.full_name : 'Independent'}
          {supplier.city ? ` • ${supplier.city}` : ''}
        </span>
      </div>
    </div>
  );
};

export default SupplierPickerRow;