// src/components/VendorApp/VendorListItem.tsx
import React from 'react';
import { ListItem, ListItemAvatar, Avatar, ListItemText, Typography, Rating, Box } from '@mui/material';
import { VendorItem } from 'types';


interface VendorListItemProps {
  vendor: VendorItem;
  isSelected: boolean;
  onSelect: (vendorId: number) => void;
}

const VendorListItem: React.FC<VendorListItemProps> = ({ vendor, isSelected, onSelect }) => {
  return (
    <ListItem
      button
      selected={isSelected}
      onClick={() => onSelect(vendor.id)}
      sx={{ borderBottom: '1px solid #eee' }}
    >
      <ListItemAvatar>
        <Avatar src={vendor.vendorImageUrl} alt={vendor.name} />
      </ListItemAvatar>
      <ListItemText
        primary={vendor.name}
        secondary={
          <Box>
            <Typography variant="body2" color="text.secondary">
              {vendor.description}
            </Typography>
            <Box display="flex" alignItems="center">
              <Rating value={vendor.rating} readOnly precision={0.5} size="small" />
              <Typography variant="caption" sx={{ ml: 0.5 }}>({vendor.rating.toFixed(1)})</Typography>
            </Box>
          </Box>
        }
      />
    </ListItem>
  );
};

export default VendorListItem;