frontend/src/app/skins/[id]/page.tsx

import { notFound } from 'next/navigation';
import SkinViewer3D from '@/components/skins/SkinViewer3D';
import { Button } from '@/components/ui/button';

interface SkinDetailProps {
    params: { id: string };
}

export default function SkinDetail({ params }: SkinDetailProps) {
    // 实际应用中这里会从API获取皮肤数据
    const skinData = {
        id: params.id,
        name: `皮肤 #${params.id}`,
        description: '这是你的Minecraft角色皮肤',
        createdAt: '2023-06-01',
        downloadUrl: `/api/skins/${params.id}/download`,
    };

    if (!skinData) return notFound();

    return (
        <div className="max-w-4xl mx-auto">
            <h1 className="text-3xl font-bold mb-6">{skinData.name}</h1>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-4">
                    <SkinViewer3D skinUrl={skinData.downloadUrl} />
                </div>

                <div>
                    <p className="mb-4">{skinData.description}</p>
                    <p className="text-gray-500 mb-6">创建于: {skinData.createdAt}</p>

                    <div className="flex gap-3">
                        <Button asChild>
                            <a href={skinData.downloadUrl} download>下载皮肤</a>
                        </Button>
                        <Button variant="outline">
                            分享
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    );
}