"use client";

import type { GroupSettingsViewModelState } from "@/features/groups/components/use-group-settings-view-model";

type GroupSettingsDangerCardProps = {
    vm: GroupSettingsViewModelState;
};

export default function GroupSettingsDangerCard({ vm }: GroupSettingsDangerCardProps) {
    return (
        <div className="panel panel-accent p-4 space-y-3">
            <div className="card-header">
                <div className="card-title text-red-200">Danger zone</div>
            </div>
            <div className="space-y-2">
                {vm.showLeaveGroup ? (
                    <button
                        type="button"
                        className="w-full rounded-lg btn-outline-accent px-3 py-2 text-sm font-semibold"
                        onClick={() => vm.setConfirmLeaveOpen(true)}
                    >
                        Leave group
                    </button>
                ) : null}
                <button
                    type="button"
                    className="w-full rounded-lg border border-red-400/60 bg-red-500/10 px-3 py-2 text-sm font-semibold text-red-200"
                    onClick={() => vm.setConfirmDeleteGroupOpen(true)}
                    disabled={!vm.isOwner}
                >
                    Delete group
                </button>
            </div>
            {!vm.isOwner ? <div className="text-xs text-soft">Only the owner can delete this group.</div> : null}
        </div>
    );
}