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 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M8.00001 3.26L9.38001 6.05L9.61001 6.55L10.11 6.625L13.19 7.07L11 9.22L10.625 9.585L10.715 10.085L11.24 13.15L8.48501 11.705L8.00001 11.5L7.53501 11.745L4.78001 13.17L5.28001 10.105L5.37001 9.605L5.00001 9.22L2.79001 7.045L5.87001 6.6L6.37001 6.525L6.60001 6.025L8.00001 3.26ZM8.00001 1L5.72501 5.61L0.640015 6.345L4.32001 9.935L3.45001 15L8.00001 12.61L12.55 15L11.68 9.935L15.36 6.35L10.275 5.61L8.00001 1Z" />
  </svg>
);

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

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