import React, { useState, useEffect } from 'react';
import { Container, Typography, Grid, Card, CardContent } from '@mui/material';

import axios, { AxiosResponse } from 'axios';
import { axiosInstance } from '../../../../../axiosApi';
import { BidAPI } from 'types';
import { VendorBidCard } from './VendorBidCard';

const VendorBidsPage: React.FC = () => {
  const [bids, setBids] = useState<BidAPI[]>([]);

  useEffect(() => {
    fetchBids();
  }, []);

  const fetchBids = async () => {
    try {
      // Endpoint to get all bids a vendor can see
      const { data: bidData }: AxiosResponse<BidAPI[]> = await axiosInstance.get('/bids/');
      setBids(bidData);
    } catch (error) {
      console.error('Failed to fetch bids', error);
    }
  };

  return (
    <Container>
      <Typography variant="h4" gutterBottom color="background.paper">
        Available Bids
      </Typography>
      <Grid container spacing={3} sx={{ mt: 3 }}>
        {bids.map((bid) => (
          <Grid size={{ xs: 12, md: 6, lg: 4 }} key={bid.id}>
            <VendorBidCard bid={bid} onResponseSubmitted={fetchBids} />
          </Grid>
        ))}
      </Grid>
    </Container>
  );
};

export default VendorBidsPage;
