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 16 16" fill="none" {...props}>
    <path
      d="M9.625 11.375C10.1082 11.375 10.5 10.9832 10.5 10.5C10.5 10.0168 10.1082 9.625 9.625 9.625C9.14175 9.625 8.75 10.0168 8.75 10.5C8.75 10.9832 9.14175 11.375 9.625 11.375Z"
      fill="#3B3C45"
    />
    <path
      d="M13.0274 10.2718C12.757 9.58322 12.2906 8.98906 11.6858 8.563C11.081 8.13695 10.3644 7.89773 9.625 7.875C8.88555 7.89773 8.16903 8.13695 7.56424 8.563C6.95944 8.98906 6.49296 9.58322 6.22261 10.2718L6.125 10.5L6.22261 10.7282C6.49296 11.4168 6.95944 12.0109 7.56424 12.437C8.16903 12.863 8.88555 13.1023 9.625 13.125C10.3644 13.1023 11.081 12.863 11.6858 12.437C12.2906 12.0109 12.757 11.4168 13.0274 10.7282L13.125 10.5L13.0274 10.2718ZM9.625 12.25C9.27888 12.25 8.94054 12.1474 8.65275 11.9551C8.36497 11.7628 8.14066 11.4895 8.00821 11.1697C7.87576 10.8499 7.8411 10.4981 7.90863 10.1586C7.97615 9.81913 8.14282 9.50731 8.38756 9.26256C8.63231 9.01782 8.94413 8.85115 9.28359 8.78363C9.62306 8.7161 9.97493 8.75076 10.2947 8.88321C10.6145 9.01566 10.8878 9.23997 11.0801 9.52775C11.2724 9.81554 11.375 10.1539 11.375 10.5C11.3745 10.964 11.1899 11.4088 10.8619 11.7369C10.5338 12.0649 10.089 12.2495 9.625 12.25Z"
      fill="#3B3C45"
    />
    <path
      d="M5.25 12.25H3.0625V3.0625H4.375V4.375H9.625V3.0625H10.9375V7H11.8125V3.0625C11.8125 2.83044 11.7203 2.60788 11.5562 2.44378C11.3921 2.27969 11.1696 2.1875 10.9375 2.1875H9.625V1.75C9.625 1.51794 9.53281 1.29538 9.36872 1.13128C9.20462 0.967187 8.98206 0.875 8.75 0.875H5.25C5.01794 0.875 4.79538 0.967187 4.63128 1.13128C4.46719 1.29538 4.375 1.51794 4.375 1.75V2.1875H3.0625C2.83044 2.1875 2.60788 2.27969 2.44378 2.44378C2.27969 2.60788 2.1875 2.83044 2.1875 3.0625V12.25C2.1875 12.4821 2.27969 12.7046 2.44378 12.8687C2.60788 13.0328 2.83044 13.125 3.0625 13.125H5.25V12.25ZM5.25 1.75H8.75V3.5H5.25V1.75Z"
      fill="#3B3C45"
    />
  </svg>
);

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

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