// components/RackDetails.tsx
import React from 'react';
import {StockRack} from '@/types';

interface RackDetailsProps {
    rack: StockRack | null;
}

export default function RackModalDetails({ rack }: RackDetailsProps) {
    return (
        <div className="overflow-auto p-4">
            <div className="flex flex-col space-y-4">
                {rack.shelves?.map((shelf) => (
                    <div key={shelf.shelf_symbol} className="flex items-start space-x-4">
                        {/* Shelf label */}
                        <div className="font-bold">Shelf {shelf.shelf_symbol}</div>

                        {/* Positions container */}
                        <div className="flex space-x-4">
                            {shelf.positions.map((position) => (
                                <div key={position.position_symbol} className="border rounded-lg p-3">
                                    {/* Position label */}
                                    <div className="font-semibold mb-2">Pos {position.position_symbol}</div>

                                    {/* Sections grid */}
                                    <div className="grid grid-cols-3 gap-2">
                                        {position.sections.map((section) => (
                                            <div
                                                key={section.section_symbol}
                                                className="border rounded p-1 text-sm text-center"
                                            >
                                                {section.section_symbol}
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}