'use client';

interface StatusButtonsProps {
  isAvailable?: boolean;
}

export function StatusButtons({ isAvailable = true }: StatusButtonsProps) {
  return (
    <div className="w-full max-w-[354px] lg:max-w-none space-y-2">
      <div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] px-4">
        <div className="flex items-center gap-2 flex-1">
          <span className="w-3 h-3 bg-green-500 rounded-full" />
          <span className="text-sm font-bold text-[#00293d] font-fractul">Available.</span>
        </div>
        <button className="px-5 py-1.5 bg-[#e58625] text-white text-sm rounded-[15px] hover:bg-[#d47720] transition-colors font-fractul">
          Connect
        </button>
      </div>
      <div className="flex items-center border border-[#00293d]/10 rounded-[15px] h-[50px] px-4">
        <div className="flex items-center gap-2 flex-1">
          <span className="w-3 h-3 bg-white border border-gray-400 rounded-full" />
          <span className="text-sm font-bold text-[#00293d] font-fractul">Unavailable.</span>
        </div>
        <button className="px-5 py-1.5 bg-[#00293d] text-white text-sm rounded-[15px] hover:bg-[#001d2b] transition-colors font-fractul">
          Connect
        </button>
      </div>
    </div>
  );
}
