import styled from '@emotion/styled';
import { GlobeRegular } from '@fluentui/react-icons';
import { Card } from 'antd';
import {
  elementBlockCategories,
  globalBlockCategories,
  MenuKeyPrefix,
} from './constants';
export const StyledMasonry = styled.div(
  ({ columns }: { columns: number }) => `
  column-count: ${columns};
  column-gap: 16px;
`,
);
export const StyledCard = styled(Card)`
  margin-bottom: 1rem;
  overflow: hidden;
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */
`;
export const globalBlockTempi = globalBlockCategories.map(({ name, key }) => ({
  key: `${MenuKeyPrefix.Global}${key}`,
  label: (
    <div className="d-flex align-items-center justify-content-between">
      {name}
      <GlobeRegular fontSize={16} />
    </div>
  ),
}));
export const elementBlockTempi = elementBlockCategories.map(
  ({ name, key }) => ({
    key: `${MenuKeyPrefix.Element}${key}`,
    label: name,
  }),
);