"use client"; // Required for Styled Components in Next.js App Router
import styled from "styled-components";

interface GridProps {
  gap?: string;
}

export const Grid = styled.div<GridProps>`
  display: flex;
  flex-wrap: wrap;
  gap: ${(props) => props.gap || "16px"};
`;

interface ColProps {
  size?: number;
  minWidth?: string;
}

export const Col = styled.div<ColProps>`
  flex: ${(props) => props.size || 1};
  min-width: ${(props) => props.minWidth || "100px"};
`;