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="M13 5.5H9V6.5H13V5.5Z" />
    <path d="M7 9.5H3V10.5H7V9.5Z" />
    <path d="M5 8C4.60444 8 4.21776 7.8827 3.88886 7.66294C3.55996 7.44318 3.30362 7.13082 3.15224 6.76537C3.00087 6.39991 2.96126 5.99778 3.03843 5.60982C3.1156 5.22186 3.30608 4.86549 3.58579 4.58579C3.86549 4.30608 4.22186 4.1156 4.60982 4.03843C4.99778 3.96126 5.39991 4.00087 5.76537 4.15224C6.13082 4.30362 6.44318 4.55996 6.66294 4.88886C6.8827 5.21776 7 5.60444 7 6C6.9994 6.53025 6.7885 7.03861 6.41356 7.41356C6.03861 7.7885 5.53025 7.9994 5 8ZM5 5C4.80222 5 4.60888 5.05865 4.44443 5.16853C4.27998 5.27841 4.15181 5.43459 4.07612 5.61732C4.00043 5.80004 3.98063 6.00111 4.01921 6.19509C4.0578 6.38907 4.15304 6.56725 4.29289 6.70711C4.43275 6.84696 4.61093 6.9422 4.80491 6.98079C4.99889 7.01937 5.19996 6.99957 5.38268 6.92388C5.56541 6.84819 5.72159 6.72002 5.83147 6.55557C5.94135 6.39112 6 6.19778 6 6C5.99974 5.73486 5.89429 5.48066 5.70681 5.29319C5.51934 5.10571 5.26514 5.00026 5 5Z" />
    <path d="M11 12C10.6044 12 10.2178 11.8827 9.88886 11.6629C9.55996 11.4432 9.30362 11.1308 9.15224 10.7654C9.00087 10.3999 8.96126 9.99778 9.03843 9.60982C9.1156 9.22186 9.30608 8.86549 9.58579 8.58579C9.86549 8.30608 10.2219 8.1156 10.6098 8.03843C10.9978 7.96126 11.3999 8.00087 11.7654 8.15224C12.1308 8.30362 12.4432 8.55996 12.6629 8.88886C12.8827 9.21776 13 9.60444 13 10C12.9994 10.5303 12.7885 11.0386 12.4136 11.4136C12.0386 11.7885 11.5303 11.9994 11 12ZM11 9C10.8022 9 10.6089 9.05865 10.4444 9.16853C10.28 9.27841 10.1518 9.43459 10.0761 9.61732C10.0004 9.80004 9.98063 10.0011 10.0192 10.1951C10.0578 10.3891 10.153 10.5673 10.2929 10.7071C10.4327 10.847 10.6109 10.9422 10.8049 10.9808C10.9989 11.0194 11.2 10.9996 11.3827 10.9239C11.5654 10.8482 11.7216 10.72 11.8315 10.5556C11.9414 10.3911 12 10.1978 12 10C11.9997 9.73487 11.8943 9.48066 11.7068 9.29319C11.5193 9.10571 11.2651 9.00027 11 9Z" />
    <path d="M14 15H2C1.73487 14.9997 1.48068 14.8943 1.2932 14.7068C1.10572 14.5193 1.00028 14.2651 1 14V2C1.00028 1.73487 1.10572 1.48068 1.2932 1.2932C1.48068 1.10572 1.73487 1.00028 2 1H14C14.2651 1.00028 14.5193 1.10572 14.7068 1.2932C14.8943 1.48068 14.9997 1.73487 15 2V14C14.9997 14.2651 14.8943 14.5193 14.7068 14.7068C14.5193 14.8943 14.2651 14.9997 14 15ZM2 2V14H14V2H2Z" />
  </svg>
);

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

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