import React from 'react';
import { Box, Typography, Button } from '@mui/material';
import styled from 'styled-components';
import Slot, { SlotData } from '../components/Slots';

const StorageContainer = styled(Box)`
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    width: 100%;
`;

const StorageWrapper = styled.div`
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 90%;
    background-color: #dcdcdc;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
`;

interface StorageProps {
    name: string;
    selectedSlot: string | null;
    slotsData: SlotData[];
    onSelectSlot: (slot: SlotData) => void;
    onRefillDewar: (slot: SlotData) => void;
}

const Storage: React.FC<StorageProps> = ({ name, selectedSlot, slotsData, onSelectSlot, onRefillDewar }) => {
    const handleSlotSelect = (slot: SlotData) => {
        onSelectSlot(slot);
        console.log('Selected slot:', slot);
    };

    return (
        <StorageContainer>
            <Typography variant="h5">{name} Slots</Typography>
            <StorageWrapper>
                {slotsData.map((slot: SlotData) => (
                    <Slot
                        key={slot.id}
                        data={slot}
                        onSelect={handleSlotSelect}
                        isSelected={selectedSlot === slot.qr_code}
                        onRefillDewar={onRefillDewar}
                    />
                ))}
            </StorageWrapper>
        </StorageContainer>
    );
};

export default Storage;