Radio

'use client'
import { useState } from 'react'

export default function Radio() {
  const [selected, setSelected] = useState('monthly')

  return (
    <div className="p-4 flex flex-col gap-3">
      {[
        { key: 'monthly', label: 'Billed monthly' },
        { key: 'yearly', label: 'Billed yearly' }
      ].map((item) => (
        <label key={item.key} className="flex items-center gap-3 cursor-pointer select-none">
          <div
            onClick={() => setSelected(item.key)}
            className={`flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors duration-200
              ${selected === item.key ? 'border-[#1d1d1f] dark:border-white' : 'border-[#d0d0d0] dark:border-[#4c4c4c]'}`}
          >
            {selected === item.key && <div className="h-[9px] w-[9px] rounded-full bg-[#1d1d1f] dark:bg-white" />}
          </div>
          <span className="text-[14px] text-[#1d1d1f] dark:text-[#f5f5f7]">{item.label}</span>
        </label>
      ))}
    </div>
  )
}