'use client'

import React from 'react'

import { DeliveryDetails } from './delivery-details'
import { SupplyCard } from './supply-card'
import { SuppliesGridProps } from './types'

export function SuppliesGrid({
  supplies,
  expandedSupplies,
  onToggleExpansion,
  getSupplyDeliveries,
  getStatusConfig,
}: SuppliesGridProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      {supplies.map((supply) => {
        const isExpanded = expandedSupplies.has(supply.id)
        const deliveries = getSupplyDeliveries(supply)

        return (
          <div key={supply.id} className="space-y-4">
            {/* Основная карточка расходника */}
            <SupplyCard
              supply={supply}
              isExpanded={isExpanded}
              onToggleExpansion={onToggleExpansion}
              getSupplyDeliveries={getSupplyDeliveries}
              getStatusConfig={getStatusConfig}
            />

            {/* Развернутые поставки */}
            {isExpanded && (
              <DeliveryDetails
                supply={supply}
                deliveries={deliveries}
                viewMode="grid"
                getStatusConfig={getStatusConfig}
              />
            )}
          </div>
        )
      })}
    </div>
  )
}
