import React from 'react';
import { Card, Row, Col } from 'antd';
import type { AssignedSellerI } from '../interface';

interface AssignedSellersPropsI {
  sellers: AssignedSellerI[]
}

const AssignedSellers: React.FC<AssignedSellersPropsI> = ({ sellers }) => {
  return (
    <Card title="Assigned Sellers" className="mt-5">
      {sellers.length === 0 ? (
        <span>No sellers assigned to this project.</span>
      ) : (
        sellers.map((seller) => (
          <Row key={seller.seller_id} className="mb-2">
            <Col span={24}>
              <span>
                {seller.name ?? `Seller #${seller.seller_id}`}
                {seller.status === 0 && <span style={{ color: '#999' }}> (Inactive)</span>}
              </span>
            </Col>
          </Row>
        ))
      )}
    </Card>
  );
};

export default AssignedSellers;