import React from 'react';
import styled from 'styled-components';

import type { IconProps } from '@redocly/theme/icons/types';

import { getCssColorVariable } from '@redocly/theme/core/utils';

const Icon = (props: IconProps) => (
  <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
      d="M13.5 1.5C13.5 1.23478 13.3946 0.98043 13.2071 0.792893C13.0196 0.605357 12.7652 0.5 12.5 0.5H1.5C1.23478 0.5 0.98043 0.605357 0.792893 0.792893C0.605357 0.98043 0.5 1.23478 0.5 1.5V12.5C0.5 12.7652 0.605357 13.0196 0.792893 13.2071C0.98043 13.3946 1.23478 13.5 1.5 13.5H12.5C12.7652 13.5 13.0196 13.3946 13.2071 13.2071C13.3946 13.0196 13.5 12.7652 13.5 12.5V1.5ZM12.5 1.5V3.5H1.5V1.5H12.5ZM12.5 12.5H1.5V10.5H12.5V12.5ZM12.5 9.5H1.5V7.5H12.5V9.5ZM12.5 6.5H1.5V4.5H12.5V6.5Z"
      fill="#22242B"
    />
  </svg>
);

export const TableIcon = styled(Icon).attrs(() => ({
  'data-component-name': 'icons/TableIcon/TableIcon',
}))<IconProps>`
  path {
    fill: ${({ color }) => getCssColorVariable(color)};
  }

  height: ${({ size }) => size || '16px'};
  width: ${({ size }) => size || '16px'};
`;