import { TabsList, TabsTrigger } from "@/components/ui/tabs";
import { UserTab } from "../types";
import { useAIUser } from "../context/aiUser";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";

const UserProfileTabs = ({ currentTab }: { currentTab: UserTab }) => {
  const { isOwner, userId } = useAIUser();
  const router = useRouter();

  const handleCreatePhoto = () => {
    router.push(`/generate/image-2-image?id=${userId}`);
  }

  return (
    <div className="flex items-center justify-between gap-4">
      {/* Tab 列表 */}
      <TabsList className="bg-transparent p-0 h-auto mb-0 w-fit justify-start gap-4">
        <TabsTrigger 
          value={UserTab.About}
          className="relative h-auto flex-col gap-1 cursor-pointer"
        >
          <span className="txt-title-m text-txt-secondary-normal group-data-[state=active]:text-txt-primary-normal">
            About
          </span>
          <div className="bg-primary-normal h-1 rounded w-5 opacity-0 group-data-[state=active]:opacity-100" />
        </TabsTrigger>
        
        <TabsTrigger 
          value={UserTab.Album}
          className="relative h-auto flex-col gap-1 cursor-pointer"
        >
          <span className="txt-title-m text-txt-secondary-normal group-data-[state=active]:text-txt-primary-normal">
            Album
          </span>
          <div className="bg-primary-normal h-1 rounded w-5 opacity-0 group-data-[state=active]:opacity-100" />
        </TabsTrigger>
      </TabsList>

      {isOwner && currentTab === UserTab.Album && <Button variant="secondary" size="small" onClick={handleCreatePhoto}>Generate</Button>}
    </div>
  );
}
 
export default UserProfileTabs;