import { Button } from '@/Components/ui/button';
import { router } from '@inertiajs/react';
import { UserCheck, UserPlus } from 'lucide-react';
import { useState } from 'react';

export default function FollowButton({ username, following, size = 'md' }: { username: string; following: boolean; size?: 'sm' | 'md' }) {
    const [busy, setBusy] = useState(false);
    const toggle = () => router[following ? 'delete' : 'put'](route(following ? 'users.unfollow' : 'users.follow', username), {}, { preserveScroll: true, onStart: () => setBusy(true), onFinish: () => setBusy(false) });
    return (
        <Button variant={following ? 'secondary' : 'primary'} size={size} loading={busy} onClick={toggle} aria-pressed={following}>
            {!busy && (following ? <UserCheck /> : <UserPlus />)}{following ? 'Following' : 'Follow'}
        </Button>
    );
}