'use client'

import { motion } from 'framer-motion'

interface SimulatorToggleProps {
  active: 'before' | 'after'
  onChange: (val: 'before' | 'after') => void
}

export function SimulatorToggle({ active, onChange }: SimulatorToggleProps) {
  return (
    <div
      className="inline-flex items-center rounded-full p-1 relative"
      style={{
        background: 'var(--dt-bg-elevated)',
        border: '1px solid var(--dt-border-subtle)',
      }}
    >
      {(['before', 'after'] as const).map((val) => (
        <button
          key={val}
          onClick={() => onChange(val)}
          className="relative z-10 px-5 py-2 text-sm font-medium rounded-full transition-colors duration-200"
          style={{
            color: active === val ? '#fff' : 'var(--dt-text-muted)',
          }}
        >
          {active === val && (
            <motion.div
              layoutId="toggle-pill"
              className="absolute inset-0 rounded-full"
              style={{
                background:
                  val === 'before'
                    ? 'rgba(239, 68, 68, 0.60)'
                    : 'var(--dt-gradient-accent)',
              }}
              transition={{ type: 'spring', stiffness: 400, damping: 32 }}
            />
          )}
          <span className="relative z-10 capitalize">{val}</span>
        </button>
      ))}
    </div>
  )
}