"use client"

import { useEffect, useState } from "react"
import { User } from "lucide-react"

type UserType = "Brendon" | "Ivy"

interface UserToggleProps {
  value: UserType
  onChange: (user: UserType) => void
}

export function UserToggle({ value, onChange }: UserToggleProps) {
  return (
    <div className="flex items-center justify-center gap-3 bg-gradient-to-r from-indigo-50 to-purple-50 p-4 rounded-lg border border-indigo-200 shadow-sm">
      <User className="h-5 w-5 text-indigo-600" />
      <span className="font-semibold text-indigo-700">User:</span>
      <div className="flex gap-2">
        <button
          type="button"
          onClick={() => onChange("Brendon")}
          className={`px-6 py-2 rounded-full font-medium transition-all ${
            value === "Brendon"
              ? "bg-indigo-600 text-white shadow-md"
              : "bg-white text-indigo-600 border border-indigo-300 hover:bg-indigo-100"
          }`}
        >
          Brendon
        </button>
        <button
          type="button"
          onClick={() => onChange("Ivy")}
          className={`px-6 py-2 rounded-full font-medium transition-all ${
            value === "Ivy"
              ? "bg-purple-600 text-white shadow-md"
              : "bg-white text-purple-600 border border-purple-300 hover:bg-purple-100"
          }`}
        >
          Ivy
        </button>
      </div>
    </div>
  )
}