'use client'

interface Option {
  key: string
  label: string
  subtitle: string
}

interface Props {
  options: Option[]
  active: string
  onChange: (key: string) => void
}

export default function SegmentedToggle({ options, active, onChange }: Props) {
  return (
    <div className="seg-toggle-wrap" style={{ alignItems: 'flex-start' }}>
      <div className="seg-toggle">
        {options.map(o => (
          <button
            key={o.key}
            className={`seg-toggle-btn ${active === o.key ? 'seg-active' : ''}`}
            onClick={() => onChange(o.key)}
          >
            {o.label}
          </button>
        ))}
      </div>
      <p className="seg-toggle-subtitle">
        {options.find(o => o.key === active)?.subtitle}
      </p>
    </div>
  )
}