'use client';
import { Button, IconButton } from '@/components/ui/button';
import { useRouter } from 'next/navigation';
import ProfileLayout from '@/layout/ProfileLayout';
import Link from 'next/link';
import IconFont from '@/components/ui/iconFont';
import { useLayoutStore } from '@/stores';
import MaskList from './MaskList';
import { useTranslations } from 'next-intl';

export default function MaskPage() {
  const t = useTranslations('profile.mask');
  const response = useLayoutStore((s) => s.response);

  const router = useRouter();

  return (
    <ProfileLayout
      bottomButton={
        <Link href={'/profile/mask/new'} className="w-full">
          <Button className="w-full" variant="primary">
            {t('addNewMask')}
          </Button>
        </Link>
      }
      rightDom={
        response?.isPC && (
          <IconFont
            onClick={() => router.push('/profile/mask/new')}
            className="text-white cursor-pointer text-3xl"
            type="icon-tianjia"
          />
        )
      }
      title={t('maskedIdentityMode')}
    >
      <div className="flex flex-col gap-6 bg-surface-base-normal p-6 rounded-2xl">
        <MaskList />
      </div>
    </ProfileLayout>
  );
}