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

interface Props {
    citizenId: string;
    characterName: string;
    gang: { label: string; grade_label: string; grade: number } | null;
}

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

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

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