// src/components/VendorApp/VendorCategoryCard.tsx
import React from 'react';
import { Card, CardContent, CardMedia, Typography, Button, Box, Rating } from '@mui/material';
import { VendorCategory } from 'types';

interface VendorCategoryCardProps {
  category: VendorCategory;
  onSelectCategory: (categoryId: string) => void;
}

const VendorCategoryCard: React.FC<VendorCategoryCardProps> = ({ category, onSelectCategory }) => {
  return (
    <Card sx={{ maxWidth: 345, height: '100%', display: 'flex', flexDirection: 'column' }}>
      <CardMedia component="img" height="140" image={category.imageUrl} alt={category.name} />
      <CardContent sx={{ flexGrow: 1 }}>
        <Typography gutterBottom variant="h5" component="div">
          {category.name}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {category.description}
        </Typography>
        <Box sx={{ mt: 1 }}>
          <Typography variant="body2">Vendors: {category.numVendors}</Typography>
          {category.categoryRating && (
            <Box display="flex" alignItems="center">
              <Rating value={category.categoryRating} readOnly precision={0.5} size="small" />
              <Typography variant="caption" sx={{ ml: 0.5 }}>
                ({category.categoryRating.toFixed(1)})
              </Typography>
            </Box>
          )}
        </Box>
      </CardContent>
      <Box sx={{ p: 2, pt: 0 }}>
        <Button
          size="small"
          onClick={() => onSelectCategory(category.id)}
          disabled={category.numVendors == 0}
        >
          View Vendors
        </Button>
      </Box>
    </Card>
  );
};

export default VendorCategoryCard;
