import {useState} from 'react';
import {useTranslation} from 'react-i18next';

import {Card} from '@/components/ui/card';
import PeopleList from './PeopleList.jsx';
import {fetchOwners} from '../../utils/people.js';

/** Who else owns this game: names of users who opted in, the rest as a count. */
export default function OwnersCard({appid}) {
    const {t} = useTranslation();
    const [count, setCount] = useState(null);

    const load = async (page) => {
        const result = await fetchOwners({appid, page});
        if (result.ok && page === 0) setCount(result.data.listedTotal + result.data.privateCount);
        return result;
    };

    return (
        <Card className="gap-3 p-4">
            {count > 0 && <p className="font-medium">{t('PEOPLE.OTHER_OWNERS', {count})}</p>}
            <PeopleList load={load} showYou={false}/>
        </Card>
    );
}