import styled from '@emotion/styled';
import {
  Bold,
  FontSize,
  Link as LinkIcon,
  OrderedList,
  UnorderedList,
} from '@os-design/icons';
import React from 'react';

export interface StyleToolbarItem {
  name: string;
  type: 'block' | 'inline';
  icon: React.ReactNode;
}

const FontSizeSmall = styled(FontSize)`
  transform: scale(0.7);
`;

const defaultStyleToolbarItems: StyleToolbarItem[] = [
  { name: 'header-two', type: 'block', icon: <FontSize /> },
  { name: 'header-three', type: 'block', icon: <FontSizeSmall /> },
  { name: 'BOLD', type: 'inline', icon: <Bold /> },
  { name: 'unordered-list-item', type: 'block', icon: <UnorderedList /> },
  { name: 'ordered-list-item', type: 'block', icon: <OrderedList /> },
  { name: 'LINK', type: 'inline', icon: <LinkIcon /> },
];

export default defaultStyleToolbarItems;