import {
  Intent,
  TradingButton,
  VegaIcon,
  VegaIconNames,
} from '@vegaprotocol/ui-toolkit';
import { useT } from '../../lib/use-t';

interface Props {
  telemetryValue: string;
  setTelemetryValue: (value: string) => void;
}

export const TelemetryApproval = ({
  telemetryValue,
  setTelemetryValue,
}: Props) => {
  const t = useT();
  return (
    <div className="flex flex-col">
      <div className="mr-4" role="form">
        <p className="mb-4">
          {t(
            'Help us identify bugs and improve Vega Governance by sharing anonymous usage data.'
          )}
        </p>
        <div className="flex items-start mb-2 gap-3">
          <VegaIcon name={VegaIconNames.EYE_OFF} size={18} />
          <div className="flex flex-col gap-1">
            <h6 className="font-semibold">{t('Anonymous')}</h6>
            <p className="text-muted">
              {t('Your identity is always anonymous on Vega')}
            </p>
          </div>
        </div>
        <div className="flex items-start mb-4 gap-3">
          <VegaIcon name={VegaIconNames.COG} size={18} />
          <div className="flex flex-col gap-1">
            <h6 className="font-semibold">{t('Optional')}</h6>
            <p className="text-muted">
              {t('You can opt out any time via settings')}
            </p>
          </div>
        </div>
        <div className="flex flex-col items-center justify-around gap-2">
          <TradingButton
            onClick={() => setTelemetryValue('false')}
            size="small"
            intent={Intent.None}
            data-testid="do-not-share-data-button"
            fill
          >
            {t('No thanks')}
          </TradingButton>

          <TradingButton
            onClick={() => setTelemetryValue('true')}
            intent={Intent.Info}
            data-testid="share-data-button"
            size="small"
            fill
          >
            {telemetryValue === 'true'
              ? t('Continue sharing data')
              : t('Share data')}
          </TradingButton>
        </div>
      </div>
    </div>
  );
};