import { Info } from 'lucide-react';
import { AssetSummaryDesktopTable } from './AssetSummaryDesktopTable';
import { AssetSummaryMobileCards } from './AssetSummaryMobileCards';
import type { AssetSummarySectionProps } from './types';

export function AssetSummarySection(props: AssetSummarySectionProps) {
  return (
    <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden mb-6">
      <div className="p-4 border-b border-gray-50 bg-gray-50/50 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
        <div className="flex flex-wrap items-center gap-4 sm:gap-6">
          <h2 className="text-sm font-bold text-gray-700">资产数据实时汇总</h2>
          <div className="hidden md:flex items-center gap-1 text-[10px] text-blue-500 bg-blue-50 px-2 py-0.5 rounded">
            <Info size={10} />
            点击型号展开详情
          </div>
        </div>
      </div>

      {/* Desktop View Table */}
      <AssetSummaryDesktopTable {...props} />

      {/* Mobile View Cards for Asset Summary */}
      <AssetSummaryMobileCards {...props} />
    </div>
  );
}