import Card from '~/src/components/Card';
import Checkbox from '~/src/components/Checkbox';
import { FlexRow } from '../../components/FlexRow';
import { SERVICE_KEYS, SERVICES } from './constants';

export const ServiceCheckboxList = ({
  onServiceChecked,
}: {
  onServiceChecked: (service: string, checked: boolean) => void;
}) => {
  return (
    <Card margin="2rem 0" padding="1.5rem">
      <FlexRow wrap gap="2rem">
        {SERVICE_KEYS.map((service) => (
          <Checkbox
            key={service}
            name={service}
            title={SERVICES[service]}
            isInitiallyChecked
            onChange={(e) => onServiceChecked(service, e)}
          />
        ))}
      </FlexRow>
    </Card>
  );
};