Grid

import type { VariantProps } from 'cva';

import { Slot } from '@/components/slot';
import { cn, cva } from '@/lib/utils/classnames';

const gridStyle = cva({
  base: 'grid',
  variants: {
    cols: {
      1: 'grid-cols-1',
      2: 'grid-cols-1 sm:grid-cols-2',
      3: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
      4: 'grid-cols-2 sm:grid-cols-2 lg:grid-cols-4',
      6: 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
      12: 'grid-cols-4 sm:grid-cols-6 lg:grid-cols-12',
    },
    gap: {
      none: 'gap-0',
      xs: 'gap-2',
      sm: 'gap-3',
      md: 'gap-4 md:gap-6',
      lg: 'gap-6 md:gap-8',
      xl: 'gap-8 md:gap-12',
    },
  },
  defaultVariants: {
    cols: 12,
    gap: 'md',
  },
});

interface GridProps
  extends React.ComponentPropsWithRef<'div'>,
    VariantProps<typeof gridStyle> {
  asChild?: boolean;
}

const Grid = ({ ref, className, cols, gap, asChild, ...rest }: GridProps) => {
  const Comp = asChild ? Slot : 'div';
  return (
    <Comp
      ref={ref}
      className={cn(gridStyle({ cols, gap }), className)}
      {...rest}
    />
  );
};

const colStyle = cva({
  base: '',
  variants: {
    span: {
      1: 'col-span-1',
      2: 'col-span-2',
      3: 'col-span-2 sm:col-span-3',
      4: 'col-span-2 sm:col-span-4',
      5: 'col-span-2 sm:col-span-5',
      6: 'col-span-full sm:col-span-6',
      7: 'col-span-full sm:col-span-7',
      8: 'col-span-full sm:col-span-8',
      9: 'col-span-full sm:col-span-9',
      10: 'col-span-full sm:col-span-10',
      11: 'col-span-full sm:col-span-11',
      12: 'col-span-full',
      full: 'col-span-full',
    },
  },
  defaultVariants: {
    span: 'full',
  },
});

interface GridColProps
  extends React.ComponentPropsWithRef<'div'>,
    VariantProps<typeof colStyle> {
  asChild?: boolean;
}

const GridCol = ({ ref, className, span, asChild, ...rest }: GridColProps) => {
  const Comp = asChild ? Slot : 'div';
  return (
    <Comp ref={ref} className={cn(colStyle({ span }), className)} {...rest} />
  );
};

interface GridSubgridProps
  extends React.ComponentPropsWithRef<'div'>,
    VariantProps<typeof colStyle> {
  asChild?: boolean;
}

/**
 * Spans columns of the parent `Grid` while making its own children align to
 * the parent's column tracks (`grid-template-columns: subgrid`). Use it to
 * line up nested content — e.g. card title / body / footer — across a row
 * regardless of each item's content length. Requires an explicit `span` so
 * the item occupies tracks before subgrid inherits them.
 */
const GridSubgrid = ({
  ref,
  className,
  span,
  asChild,
  ...rest
}: GridSubgridProps) => {
  const Comp = asChild ? Slot : 'div';
  return (
    <Comp
      ref={ref}
      className={cn('grid grid-cols-subgrid', colStyle({ span }), className)}
      {...rest}
    />
  );
};

const CompoundGrid = Object.assign(Grid, {
  Col: GridCol,
  Subgrid: GridSubgrid,
});

export type { GridColProps, GridProps, GridSubgridProps };
export { CompoundGrid as Grid, colStyle, gridStyle };