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="M13.855 4.64501L11.355 2.14501C11.3083 2.09867 11.2529 2.06201 11.192 2.03712C11.131 2.01224 11.0658 1.99963 11 2.00001H3C2.73478 2.00001 2.48043 2.10537 2.29289 2.2929C2.10536 2.48044 2 2.73479 2 3.00001V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8947 2.73478 14 3 14H13C13.2652 14 13.5196 13.8947 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13V5.00001C14.0004 4.93421 13.9878 4.86897 13.9629 4.80806C13.938 4.74714 13.9013 4.69173 13.855 4.64501ZM6 3.00001H10V5.00001H6V3.00001ZM10 13H6V9.00001H10V13ZM11 13V9.00001C11 8.73479 10.8946 8.48044 10.7071 8.2929C10.5196 8.10537 10.2652 8.00001 10 8.00001H6C5.73478 8.00001 5.48043 8.10537 5.29289 8.2929C5.10536 8.48044 5 8.73479 5 9.00001V13H3V3.00001H5V5.00001C5 5.26523 5.10536 5.51958 5.29289 5.70712C5.48043 5.89465 5.73478 6.00001 6 6.00001H10C10.2652 6.00001 10.5196 5.89465 10.7071 5.70712C10.8946 5.51958 11 5.26523 11 5.00001V3.20501L13 5.20501V13H11Z" />
  </svg>
);

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

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