import React from 'react';
import { Text, theme } from '@veeqo/ui';
import Glyph from 'components/common/Glyph';

import { Label, Input } from './styled';

export interface VisibilityFilterProps {
  title: string;
  isVisible: boolean;
  onChange: (isVisible: boolean) => void;
}

const VisibilityFilter = ({ title, isVisible, onChange }: VisibilityFilterProps) => (
  <Label>
    <Text variant="body">{title}</Text>
    <Input
      type="checkbox"
      checked={isVisible}
      onChange={(e) => onChange(e.currentTarget.checked)}
    />
    <Glyph
      name={isVisible ? 'visibility' : 'visibility-off'}
      color={isVisible ? theme.colors.neutral.ink.base : theme.colors.neutral.grey.dark}
    />
  </Label>
);

export default VisibilityFilter;