import { Mail, Phone } from "lucide-react";
import { useTranslation } from "react-i18next";

export default function TabsLogin({ loginMethod, handelTabs }) {
  const { t } = useTranslation();
  return (
    <>
      <div className="flex gap-2 bg-white/5 p-1 rounded-xl">
        <button
          type="button"
          onClick={() => {
            handelTabs("email");
          }}
          className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
            loginMethod === "email" ? "bg-amber-500 text-white shadow-lg" : "text-gray-400 hover:text-white"
          }`}
        >
          <Mail className="w-4 h-4" />
          {t("emailMethod")}
        </button>
        <button
          type="button"
          onClick={() => {
            handelTabs("phone");
          }}
          className={`flex-1 py-2.5 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
            loginMethod === "phone" ? "bg-amber-500 text-white shadow-lg" : "text-gray-400 hover:text-white"
          }`}
        >
          <Phone className="w-4 h-4" />
          {t("phoneMethod")}
        </button>
      </div>
    </>
  );
}