// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { withTheme } from 'styled-components';
import type { ThemeProps } from '../../../types';
import type { LockProps } from './lock.proptypes';
import { getIconColor } from './lock.css-rules';

const _Lock = ({ theme, disabled }: {| ...ThemeProps, ...LockProps |}) => (
  <svg
    width="44px"
    height="44px"
    viewBox="0 0 44 44"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g
      stroke="none"
      strokeWidth="1"
      fill={getIconColor({ theme, disabled })}
      fillRule="evenodd"
    >
      <path d="M27 20h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H16a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1h1v-3a5 5 0 0 1 10 0v3zm-8 0h6v-3a3 3 0 0 0-6 0v3z" />
    </g>
  </svg>
);

export const Lock: ComponentType<LockProps> = withTheme(_Lock);

Lock.displayName = 'Lock';
