'use client';

import * as React from 'react';
import { motion } from 'motion/react';

import { RequireAuth } from '@/components/auth/require-auth';
import { UserFileManager } from '@/components/common/user/file-manager';
import { FolderOpen } from 'lucide-react';
import { useTranslations } from 'next-intl';

export default function UserFilesPage() {
  const t = useTranslations('files');
  return (
    <RequireAuth>
      <motion.div
        initial={{ opacity: 0, y: 15 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.35, ease: 'easeOut' }}
        className='flex w-full flex-col gap-6 py-6'
      >
        {/* 顶部标题区 */}
        <div className='flex flex-col md:flex-row md:items-center justify-between gap-4 pb-5'>
          <div className='flex items-center gap-2'>
            <FolderOpen className='size-5 text-primary' />
            <div>
              <h1 className='text-2xl font-semibold tracking-tight'>
                {t('myFiles')}
              </h1>
            </div>
          </div>
        </div>

        <UserFileManager />
      </motion.div>
    </RequireAuth>
  );
}