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 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M15.2308 4.17188C15.2308 3.95614 15.0586 3.78125 14.8462 3.78125H1.15385C0.941429 3.78125 0.769231 3.95614 0.769231 4.17188V11.8281C0.769231 12.0439 0.941429 12.2188 1.15385 12.2188H14.8462C15.0586 12.2188 15.2308 12.0439 15.2308 11.8281V4.17188ZM16 11.8281C16 12.4753 15.4834 13 14.8462 13H1.15385C0.516595 13 0 12.4753 0 11.8281V4.17188C0 3.52467 0.516595 3 1.15385 3H14.8462C15.4834 3 16 3.52467 16 4.17188V11.8281Z" />
    <path d="M2.30769 10.6562V5.34375H3.84615L5.38462 7.29688L6.92308 5.34375H8.46154V10.6562H6.92308V7.60938L5.38462 9.5625L3.84615 7.60938V10.6562H2.30769ZM11.9231 10.6562L9.61539 8.07812H11.1538V5.34375H12.6923V8.07812H14.2308L11.9231 10.6562Z" />
  </svg>
);

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

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