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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="none" {...props}>
    <path d="M4.88688 2.625L6.38313 4.11688L6.63688 4.375H12.25V11.375H1.75V2.625H4.88688ZM4.88688 1.75H1.75C1.51794 1.75 1.29538 1.84219 1.13128 2.00628C0.967187 2.17038 0.875 2.39294 0.875 2.625V11.375C0.875 11.6071 0.967187 11.8296 1.13128 11.9937C1.29538 12.1578 1.51794 12.25 1.75 12.25H12.25C12.4821 12.25 12.7046 12.1578 12.8687 11.9937C13.0328 11.8296 13.125 11.6071 13.125 11.375V4.375C13.125 4.14294 13.0328 3.92038 12.8687 3.75628C12.7046 3.59219 12.4821 3.5 12.25 3.5H7L5.50813 2.00813C5.42672 1.92624 5.32992 1.86127 5.2233 1.81697C5.11667 1.77267 5.00234 1.74991 4.88688 1.75Z" />
  </svg>
);

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

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