/* Staff of a business whose account is locked (unpaid or suspended): only the owner can sort it out. */
import { router } from '@inertiajs/react';
import { Lock, LogOut } from 'lucide-react';
import AuthLayout from '../layouts/AuthLayout';
import { Button } from '../components/ui';

export default function Locked({ suspended }: { suspended: boolean }) {
    return (
        <AuthLayout title="Paused" heading="This shop is paused" intro={suspended ? 'This account has been paused.' : 'The subscription needs paying.'}>
            <div className="flex items-start gap-3 rounded-2xl bg-line-2 p-4 text-sm text-ink-2">
                <Lock className="mt-0.5 size-5 shrink-0 text-muted" aria-hidden />
                <p>Sales can't be recorded until the owner sorts this out. Nothing has been lost. Please let the owner know.</p>
            </div>
            <Button variant="secondary" icon={LogOut} className="mt-5 w-full" onClick={() => router.post(route('logout'))}>Sign out</Button>
        </AuthLayout>
    );
}