import { cn } from "@repo/shadcn-ui/lib/utils";
import type * as React from "react";

/** 1–12 spans por breakpoint */
export type Spans = Partial<{ base: number; sm: number; md: number; lg: number; xl: number }>;

function to12(n?: number) {
  if (!n) return 12;
  return n < 1 ? 1 : n > 12 ? 12 : n;
}

function spansToClasses(spans?: Spans) {
  const s = spans ?? { base: 12 };
  const parts: string[] = [];
  if (s.base) parts.push(`col-span-${to12(s.base)}`);
  if (s.sm) parts.push(`sm:col-span-${to12(s.sm)}`);
  if (s.md) parts.push(`md:col-span-${to12(s.md)}`);
  if (s.lg) parts.push(`lg:col-span-${to12(s.lg)}`);
  if (s.xl) parts.push(`xl:col-span-${to12(s.xl)}`);
  return parts.join(" ");
}

export interface CellProps extends React.HTMLAttributes<HTMLDivElement> {
  /** 1–12 por breakpoint (p.ej. { base:12, sm:6, xl:3 }) */
  span?: Spans;
}

export function Cell({ span, className, ...rest }: CellProps) {
  return <div className={cn(spansToClasses(span), className)} {...rest} />;
}