import { SectionCard } from '../../core/SectionCard';
import { Notice } from '../../core/Notice';
import { CheckboxField } from '../../forms';

export type ServerHdOptionPanelProps = {
  enabled: boolean;
  mode: string;
  labels: {
    title: string;
    hint: string;
    singleOnly: string;
  };
  onEnabledChange: (enabled: boolean) => void;
};

export function ServerHdOptionPanel({ enabled, mode, labels, onEnabledChange }: ServerHdOptionPanelProps) {
  return (
    <SectionCard padding="sm">
      <CheckboxField checked={enabled} label={labels.title} boxed={false} onCheckedChange={onEnabledChange} />
      <div className="ask-mt-1 ask-text-[11px] ask-leading-5 ask-text-textMuted">{labels.hint}</div>
      {enabled && mode === 'all' ? (
        <Notice className="ask-mt-2" variant="warning">{labels.singleOnly}</Notice>
      ) : null}
    </SectionCard>
  );
}
