'use client'

import { useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { SimulatorToggle } from './SimulatorToggle'
import { WorkflowBefore } from './WorkflowBefore'
import { WorkflowAfter } from './WorkflowAfter'

export function BeforeAfterSimulator() {
  const [active, setActive] = useState<'before' | 'after'>('before')

  return (
    <div>
      <div className="flex justify-center mb-8">
        <SimulatorToggle active={active} onChange={setActive} />
      </div>

      <div
        className="rounded-2xl p-6 md:p-8 overflow-hidden"
        style={{
          background: 'var(--dt-bg-surface)',
          border: '1px solid var(--dt-border-subtle)',
          minHeight: '420px',
        }}
      >
        <AnimatePresence mode="wait">
          <motion.div
            key={active}
            initial={{ opacity: 0, x: active === 'after' ? 40 : -40 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: active === 'after' ? -40 : 40 }}
            transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] }}
          >
            {active === 'before' ? <WorkflowBefore /> : <WorkflowAfter />}
          </motion.div>
        </AnimatePresence>
      </div>
    </div>
  )
}