import React from 'react';
import { Box, InfoIcon, Text, ToggleSwitch } from '@wix/design-system';

export interface RequiredToggleProps {
  label: string;
  checked: boolean;
  onChange: (v: boolean) => void;
}

export const RequiredToggle = ({
  label,
  checked,
  onChange,
}: RequiredToggleProps) => (
  <Box verticalAlign="middle" gap="SP2">
    <ToggleSwitch checked={checked} onChange={() => onChange(!checked)} />
    <Text size="small">{label}</Text>
    <InfoIcon content="When enabled, this field must have a value before saving an item." />
  </Box>
);