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"
    width="8"
    height="12"
    viewBox="0 0 8 12"
    fill="none"
    {...props}
  >
    <path
      d="M7.6375 3.4875L5.0125 0.8625C4.9375 0.7875 4.8625 0.75 4.75 0.75H1C0.5875 0.75 0.25 1.0875 0.25 1.5V10.5C0.25 10.9125 0.5875 11.25 1 11.25H7C7.4125 11.25 7.75 10.9125 7.75 10.5V3.75C7.75 3.6375 7.7125 3.5625 7.6375 3.4875ZM4.75 1.65L6.85 3.75H4.75V1.65ZM7 10.5H1V1.5H4V3.75C4 4.1625 4.3375 4.5 4.75 4.5H7V10.5Z"
      fill="currentColor"
    />
    <path d="M6.25 8.25H1.75V9H6.25V8.25Z" fill="currentColor" />
    <path d="M6.25 6H1.75V6.75H6.25V6Z" fill="currentColor" />
  </svg>
);

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

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