import React from 'react';
import './GridLayout.scss';
import { ContainerProps, RowProps, ColProps } from './types';

export const Container: React.FC<ContainerProps> = ({
  children,
  fluid = false,
  gap = '0px',
}) => {
  const className = fluid ? 'ff-container-fluid' : 'ff-container';
  return (
    <div className={className} style={{ gap }}>
      {children}
    </div>
  );
};

export const Row: React.FC<RowProps> = ({ children, gap = '0px' }) => {
  return (
    <div className="ff-row" style={{ gap }}>
      {children}
    </div>
  );
};

export const Col: React.FC<ColProps> = ({ children, size = 12 }) => {
  const className = `ff-col-${size}`;
  return <div className={className}>{children}</div>;
};