'use client'

import { Package, Warehouse, TrendingUp, TrendingDown, MapPin, Info } from 'lucide-react'
import React from 'react'

export function TableHeader() {
  return (
    <div className="mb-3 p-4 rounded-xl bg-gradient-to-r from-white/5 to-white/10 border border-white/10">
      <div className="grid grid-cols-12 gap-4 text-sm font-medium text-white/80">
        <div className="col-span-3 flex items-center gap-2">
          <Package className="h-4 w-4 text-blue-400" />
          <span>Товар</span>
        </div>
        <div className="col-span-1 text-center flex items-center justify-center gap-1">
          <Warehouse className="h-3 w-3 text-green-400" />
          <span>Остаток</span>
        </div>
        <div className="col-span-1 text-center flex items-center justify-center gap-1">
          <TrendingUp className="h-3 w-3 text-orange-400" />
          <span>К клиенту</span>
        </div>
        <div className="col-span-1 text-center flex items-center justify-center gap-1">
          <TrendingDown className="h-3 w-3 text-red-400" />
          <span>От клиента</span>
        </div>
        <div className="col-span-1 text-center flex items-center justify-center gap-1">
          <MapPin className="h-3 w-3 text-purple-400" />
          <span>Складов</span>
        </div>
        <div className="col-span-5 flex items-center gap-2">
          <Info className="h-4 w-4 text-blue-400" />
          <span>Характеристики</span>
        </div>
      </div>
    </div>
  )
}
