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 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
      d="M10.5 6.4375L11.3365 8.05756L13.125 8.31744L11.8125 9.5L12.1498 11.25L10.5 10.2656L8.85019 11.25L9.1875 9.5L7.875 8.31744L9.7125 8.05756L10.5 6.4375Z"
      fill="#1A1C21"
    />
    <path d="M5.25 6H2.625V6.875H5.25V6Z" fill="#1A1C21" />
    <path d="M7 4.25H2.625V5.125H7V4.25Z" fill="#1A1C21" />
    <path d="M7 2.5H2.625V3.375H7V2.5Z" fill="#1A1C21" />
    <path
      d="M7 10.375H1.75V1.625H12.25V6H13.125V1.625C13.125 1.39294 13.0328 1.17038 12.8687 1.00628C12.7046 0.842187 12.4821 0.75 12.25 0.75H1.75C1.51794 0.75 1.29538 0.842187 1.13128 1.00628C0.967187 1.17038 0.875 1.39294 0.875 1.625V10.375C0.875 10.6071 0.967187 10.8296 1.13128 10.9937C1.29538 11.1578 1.51794 11.25 1.75 11.25H7V10.375Z"
      fill="#1A1C21"
    />
  </svg>
);

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

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