import React from 'react';
import styled from 'styled-components';

import { getCssColorVariable } from '@redocly/theme/core/utils';

type IconProps = {
  size?: string;
  color?: string;
  className?: string;
  onClick?: () => void;
};

const Icon = ({ className, onClick }: IconProps) => (
  <svg
    className={className}
    onClick={onClick}
    xmlns="http://www.w3.org/2000/svg"
    width="14"
    height="14"
    viewBox="0 0 14 14"
    fill="inherit"
  >
    <path d="M7 12.25L3.9375 9.1875L4.55437 8.57063L7 11.0119L9.44563 8.57063L10.0625 9.1875L7 12.25Z" />
    <path d="M7 1.75L10.0625 4.8125L9.44563 5.42937L7 2.98812L4.55437 5.42937L3.9375 4.8125L7 1.75Z" />
  </svg>
);

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