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 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M8 2.01318C5.35105 2.01318 2.5 2.63918 2.5 4.01318V13.0132C2.5 14.3872 5.35105 15.0132 8 15.0132C10.649 15.0132 13.5 14.3872 13.5 13.0132V4.01318C13.5 2.63918 10.649 2.01318 8 2.01318ZM8 3.01318C10.8988 3.01318 12.3974 3.73023 12.4984 4.01318C12.3974 4.29613 10.8988 5.01318 8 5.01318C5.07935 5.01318 3.5803 4.28538 3.5 4.02198V4.01953C3.5803 3.74098 5.07935 3.01318 8 3.01318ZM3.5 5.22703C4.56395 5.76073 6.3213 6.01318 8 6.01318C9.6787 6.01318 11.4361 5.76073 12.5 5.22703V7.00683C12.4197 7.28538 10.9207 8.01318 8 8.01318C5.07495 8.01318 3.57545 7.28318 3.5 7.01318V5.22703ZM3.5 8.22703C4.56395 8.76073 6.3213 9.01318 8 9.01318C9.6787 9.01318 11.4361 8.76073 12.5 8.22703V10.0068C12.4197 10.2854 10.9207 11.0132 8 11.0132C5.07495 11.0132 3.57545 10.2832 3.5 10.0132V8.22703ZM8 14.0132C5.07495 14.0132 3.57545 13.2832 3.5 13.0132V11.227C4.56395 11.7607 6.3213 12.0132 8 12.0132C9.6787 12.0132 11.4361 11.7607 12.5 11.227V13.0068C12.4197 13.2854 10.9207 14.0132 8 14.0132Z" />
  </svg>
);

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

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