'use client';

import { useMemo, type CSSProperties } from 'react';
import {
  packDashboardCells,
  packedCellClassName,
  TODAY_DASHBOARD_GRID_CLASS,
  type TodayDashboardCell,
} from '@/components/today/today-dashboard-layout';

interface TodayDashboardGridProps {
  cells: TodayDashboardCell[];
  loading?: boolean;
}

export function TodayDashboardGrid({ cells, loading = false }: TodayDashboardGridProps) {
  const packed = useMemo(() => packDashboardCells(cells), [cells]);

  if (packed.length === 0) {
    return null;
  }

  return (
    <div
      className={`${TODAY_DASHBOARD_GRID_CLASS} ${loading ? 'opacity-70 transition-opacity' : ''}`}
      style={{ gridAutoRows: 'var(--today-grid-unit, 5.75rem)' }}
    >
      {packed.map((cell) => (
        <div
          key={cell.id}
          className={`today-dashboard-cell ${packedCellClassName(cell.layout)}`}
          style={
            {
              '--today-gc': cell.gridColumn,
              '--today-gr': cell.gridRow,
            } as CSSProperties
          }
        >
          <div className="flex h-full min-h-0 flex-1 flex-col">{cell.content}</div>
        </div>
      ))}
    </div>
  );
}