import Image from 'next/image'
import Link from 'next/link'

const ProfileFeatureList = () => {
  return (
    <div className="bg-surface-nest-normal w-full rounded-lg p-4">
      <div className="flex items-center justify-between gap-4">
        {/* Membership */}
        <Link href="/vip" className="flex-1">
          <div className="flex flex-col items-center justify-center gap-3">
            <div className="flex h-16 w-16 items-center justify-center rounded-full">
              {/* 会员图标占位 */}
              <Image src="/images/profile/membership.svg" alt="Membership" width={64} height={64} />
            </div>
            <span className="txt-label-m text-[var(--color-txt-primary-normal)]">VIP</span>
          </div>
        </Link>

        {/* Wallet */}
        <Link href="/wallet" className="flex-1">
          <div className="flex flex-col items-center justify-center gap-3">
            <div className="flex h-16 w-16 items-center justify-center rounded-full">
              {/* 会员图标占位 */}
              <Image src="/images/profile/wallet.svg" alt="Wallet" width={64} height={64} />
            </div>
            <span className="txt-label-m text-[var(--color-txt-primary-normal)]">Wallet</span>
          </div>
        </Link>

        {/* Creator */}
        <Link href="/creator" className="flex-1">
          <div className="flex flex-1 flex-col items-center justify-center gap-3">
            <div className="flex h-16 w-16 items-center justify-center rounded-full">
              {/* 会员图标占位 */}
              <Image src="/images/profile/creator.svg" alt="Creator" width={64} height={64} />
            </div>
            <span className="txt-label-m text-[var(--color-txt-primary-normal)]">Creator</span>
          </div>
        </Link>
      </div>
    </div>
  )
}

export default ProfileFeatureList
