'use client'

import { IconButton } from '@/components/ui/button'
import Image from 'next/image'
import { useRouter } from 'next/navigation'

const CreatorPage = () => {
  const router = useRouter()

  const handleBack = () => {
    router.back()
  }

  return (
    <div className="mt-12 px-16">
      <div className="mx-auto max-w-[752px] pb-20">
        <div className="flex items-center gap-2">
          <IconButton
            variant="ghost"
            size="large"
            onClick={handleBack}
            iconfont="icon-arrow-left"
          ></IconButton>
          <h1 className="txt-title-l text-txt-primary-normal">Creator</h1>
        </div>

        <div
          className="txt-headline-m my-6 flex h-[180px] flex-col items-center justify-center text-center"
          style={{
            background: `url("/images/creator/icon-star.png") no-repeat center center`,
            backgroundSize: 'cover',
          }}
        >
          <div>Create High-Quality AI Characters</div>
          <div>and Earn CrushCoin.</div>
        </div>
        <div className="flex flex-col gap-4">
          <div className="grid grid-cols-3 items-center gap-8">
            <Image src="/images/creator/icon-gift.png" alt="gift" width={240} height={160} />

            <div className="col-span-2">
              <div className="txt-title-m">Gift Revenue</div>
              <div className="txt-body-l text-txt-secondary-normal">
                Your interlocutors can pay to send virtual gifts to your AI character.
              </div>
            </div>
          </div>

          <div className="grid grid-cols-3 items-center gap-8">
            <div className="col-span-2">
              <div className="txt-title-m">Image Sales</div>
              <div className="txt-body-l text-txt-secondary-normal">
                Your interlocutors can pay to unlock album pictures you've created for your AI
                character.
              </div>
            </div>

            <Image src="/images/creator/icon-image.png" alt="gift" width={240} height={160} />
          </div>

          <div className="grid grid-cols-3 items-center gap-8">
            <Image src="/images/creator/icon-more.png" alt="gift" width={240} height={160} />

            <div className="col-span-2">
              <div className="txt-title-m">More Revenue</div>
              <div className="txt-body-l text-txt-secondary-normal">
                Stay tuned for more ways to earn!
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default CreatorPage
