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="mb-0 h-auto w-fit justify-start gap-4 bg-transparent p-0">
        <TabsTrigger
          value={UserTab.About}
          className="relative h-auto cursor-pointer flex-col gap-1"
        >
          <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 w-5 rounded opacity-0 group-data-[state=active]:opacity-100" />
        </TabsTrigger>

        <TabsTrigger
          value={UserTab.Album}
          className="relative h-auto cursor-pointer flex-col gap-1"
        >
          <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 w-5 rounded 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