/**
 * @ai-summary Email notification toggle component
 * @ai-context Uses MUI Switch to match SettingsPage pill-style toggles
 */

import React from 'react';
import { Box, Switch, Typography } from '@mui/material';

interface EmailNotificationToggleProps {
  enabled: boolean;
  onChange: (enabled: boolean) => void;
  label?: string;
  className?: string;
}

export const EmailNotificationToggle: React.FC<EmailNotificationToggleProps> = ({
  enabled,
  onChange,
  label = 'Email notifications',
  className = '',
}) => {
  return (
    <Box className={className} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2 }}>
      <Typography variant="body2" fontWeight={500} color="text.secondary">
        {label}
      </Typography>
      <Switch
        checked={enabled}
        onChange={(e) => onChange(e.target.checked)}
        color="primary"
        inputProps={{ 'aria-label': label }}
      />
    </Box>
  );
};
