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="M14 10H13V11H14V14H2V11H3V10H2C1.73488 10.0003 1.48071 10.1058 1.29324 10.2932C1.10578 10.4807 1.00032 10.7349 1 11V14C1.00032 14.2651 1.10578 14.5193 1.29324 14.7068C1.48071 14.8942 1.73488 14.9997 2 15H14C14.2651 14.9997 14.5193 14.8942 14.7068 14.7068C14.8942 14.5193 14.9997 14.2651 15 14V11C14.9997 10.7349 14.8942 10.4807 14.7068 10.2932C14.5193 10.1058 14.2651 10.0003 14 10Z" />
    <path d="M3.5 13C3.77614 13 4 12.7761 4 12.5C4 12.2239 3.77614 12 3.5 12C3.22386 12 3 12.2239 3 12.5C3 12.7761 3.22386 13 3.5 13Z" />
    <path d="M11.3535 3.6465L8.8535 1.1465C8.75975 1.05273 8.6326 1.00003 8.5 1H5.5C5.23488 1.0003 4.9807 1.10576 4.79323 1.29323C4.60576 1.4807 4.5003 1.73488 4.5 2V10C4.5003 10.2651 4.60576 10.5193 4.79323 10.7068C4.9807 10.8942 5.23488 10.9997 5.5 11H10.5C10.7651 10.9997 11.0193 10.8942 11.2068 10.7068C11.3942 10.5193 11.4997 10.2651 11.5 10V4C11.5 3.8674 11.4473 3.74025 11.3535 3.6465ZM10.2928 4H8.5V2.20705L10.2928 4ZM5.5 10V2H7.5V4C7.5003 4.26512 7.60576 4.5193 7.79323 4.70677C7.9807 4.89424 8.23488 4.9997 8.5 5H10.5V10H5.5Z" />
  </svg>
);

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

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