import { Head } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout';
import CharacterTabs from '@/Components/CharacterTabs';

interface Props {
    citizenId: string;
    characterName: string;
    job: { label: string; grade_label: string; grade: number };
}

export default function Job({ citizenId, characterName, job }: Props) {
    return (
        <AppLayout>
            <Head title={`${characterName} — Job`} />
            <CharacterTabs citizenId={citizenId} active="job.show" />

            <h1 className="mb-6 text-2xl font-bold">Job</h1>

            <div className="rounded-lg bg-gray-900 p-6 ring-1 ring-white/10">
                <p className="text-2xl font-semibold">{job.label}</p>
                <p className="mt-1 text-gray-400">
                    Grade {job.grade}
                    {job.grade_label ? ` — ${job.grade_label}` : ''}
                </p>
            </div>
        </AppLayout>
    );
}
