import { ChevronRight } from "lucide-react";
import { useAuthStore } from "../../stores/authStore";
import { useNavigate } from "react-router-dom";

export const Profile = () => {
  const user = useAuthStore((state) => state.user);
  const navigate = useNavigate();

  const handleLogout = () => {
    useAuthStore.getState().logout();
    navigate("/login");
  };

  return (
    <main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8">
      <h1 className="text-lg font-satoshi-bold text-center">Profile</h1>
      <section>
        <h3 className="text-2xl font-satoshi-bold">{user?.name}</h3>
        <p className="text-lg font-satoshi">{user?.email}</p>
      </section>
      <section className="space-y-4">
        <h5 className="text-[12px] font-satoshi-bold text-gray-400">ACCOUNT</h5>
        <div className="border rounded-4xl">
          <button className="w-full rounded-t-4xl border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
            <span className="font-satoshi text-black">Account details</span>
            <ChevronRight color="gray" size={20} />
          </button>
          <button className="w-full border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
            <span className="font-satoshi text-black">Redeem a code</span>
            <ChevronRight color="gray" size={20} />
          </button>
          <button className="w-full border-b bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
            <span className="font-satoshi text-black">Manage subscription</span>
            <ChevronRight color="gray" size={20} />
          </button>
          <button className="w-full rounded-b-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
            <span className="font-satoshi text-black">Preferences</span>
            <ChevronRight color="gray" size={20} />
          </button>
        </div>
      </section>
      <section className="space-y-4">
        <h5 className="text-[12px] font-satoshi-bold text-gray-400">LEGAL</h5>
        <div className="border rounded-4xl">
          <button className="w-full border-b rounded-t-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
            <span className="font-satoshi text-black">Terms of Use</span>
            <ChevronRight color="gray" size={20} />
          </button>
          <button className="w-full border-b rounded-b-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
            <span className="font-satoshi text-black">Privacy Policy</span>
            <ChevronRight color="gray" size={20} />
          </button>
        </div>
      </section>
      <section className="space-y-4">
        <h5 className="text-[12px] font-satoshi-bold text-gray-400">SUPPORT</h5>
        <div className="border rounded-4xl">
          <button className="w-full rounded-4xl bg-white py-4 px-4 flex justify-between items-center active:bg-gray-50">
            <span className="font-satoshi text-black">Contact Us</span>
            <ChevronRight color="gray" size={20} />
          </button>
        </div>
      </section>
      <button
        onClick={handleLogout}
        className="w-full border rounded-4xl bg-purple-500 py-4 px-4 flex justify-center items-center active:bg-purple-600 font-satoshi-medium text-white"
      >
        Sign Out
      </button>
    </main>
  );
};