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 10 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M9.85 3.65006L6.35 0.150055C6.30601 0.101196 6.25192 0.0624773 6.19149 0.036578C6.13106 0.0106787 6.06572 -0.00178282 6 5.53814e-05H1C0.735023 0.000833625 0.481121 0.10644 0.293753 0.293808C0.106385 0.481176 0.000778244 0.735078 0 1.00006V13.0001C0.000778244 13.265 0.106385 13.5189 0.293753 13.7063C0.481121 13.8937 0.735023 13.9993 1 14.0001H9C9.26498 13.9993 9.51888 13.8937 9.70625 13.7063C9.89362 13.5189 9.99922 13.265 10 13.0001V4.00006C10.0018 3.93433 9.98938 3.869 9.96348 3.80857C9.93758 3.74813 9.89886 3.69405 9.85 3.65006ZM6 1.20006L8.8 4.00006H6V1.20006ZM9 13.0001H1V1.00006H5V4.00006C5.00078 4.26503 5.10638 4.51893 5.29375 4.7063C5.48112 4.89367 5.73502 4.99928 6 5.00006H9V13.0001Z" />
  </svg>
);

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

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