// src/components/Items.js
import React, { useEffect, useState } from 'react';
import { Container, List, ListItem, ListItemText } from '@mui/material';
import axios from 'axios';
import { useParams } from 'react-router-dom'; // Import useParams


export default function Items({ token }) {
  const { id: boxId } = useParams(); // Get boxId from URL parameters
  const [items, setItems] = useState([]);
  console.log("boxId is " + boxId)
  useEffect(() => {
    axios.get(`${process.env.REACT_APP_API_URL}/boxes/${boxId}/items`, {
      headers: { Authorization: `Bearer ${token}` }
    }).then(response => {
      setItems(response.data);
    });
  }, [boxId, token]);

  return (
    <Container>
      <List>
        {items.map((item) => (
          <ListItem key={item.id}>
            <ListItemText primary={item.name} secondary={item.description} />
          </ListItem>
        ))}
      </List>
    </Container>
  );
}