frontend/src/components/ExampleVariantToggle.tsx

import React from 'react'

export function handleVariantToggleClick(
  toggleMode: 'wmd' | 'attacked',
  selectedVariant: string,
  setSelectedVariant: (v: string) => void,
  variantKeys: string[]
) {
  if (toggleMode === 'wmd') {
    if (selectedVariant === 'original' && variantKeys.includes('wmd')) {
      setSelectedVariant('wmd')
    } else {
      setSelectedVariant('original')
    }
  } else if (toggleMode === 'attacked') {
    if (selectedVariant === 'original' && variantKeys.includes('attacked')) {
      setSelectedVariant('attacked')
    } else {
      setSelectedVariant('original')
    }
  } else {
    setSelectedVariant('original')
  }
}

interface ExampleVariantToggleProps {
  toggleMode: 'wmd' | 'attacked'
  setToggleMode: (mode: 'wmd' | 'attacked') => void
  selectedVariant: string
  setSelectedVariant: (v: string) => void
  variantKeys: string[]
}

const ExampleVariantToggle: React.FC<ExampleVariantToggleProps> = ({
  toggleMode,
  setToggleMode,
  selectedVariant,
  setSelectedVariant,
  variantKeys,
}) => {
  return (
    <div className="my-2 flex gap-6">
      <button
        className={`btn ${toggleMode === 'wmd' ? 'btn-primary' : 'btn-outline'}`}
        type="button"
        onClick={() => {
          setToggleMode('wmd')
          handleVariantToggleClick(toggleMode, selectedVariant, setSelectedVariant, variantKeys)
        }}
      >
        Original ⇄ Watermarked
      </button>
      <button
        className={`btn ${toggleMode === 'attacked' ? 'btn-primary' : 'btn-outline'}`}
        type="button"
        onClick={() => {
          setToggleMode('attacked')
          handleVariantToggleClick(toggleMode, selectedVariant, setSelectedVariant, variantKeys)
        }}
      >
        Original ⇄ Attacked
      </button>
    </div>
  )
}

export default ExampleVariantToggle