"use client"


export default function TenantWidget({
    total, percentage, title, 
} : {
    total: string;
    percentage: number;
    title: string;
}
) {
    return (
        <div className="card">
            <div className="card-body">
                <div className="d-flex align-items-center">
                    <div className="subheader">{title}</div>
                    <div className="ms-auto lh-1">
                        <div className="dropdown">Last Update</div>
                    </div>
                </div>
                <div className="h1 mb-3">{percentage}%</div>
                <div className="d-flex mb-2">
                    <div className="text-red">0%</div>
                    <div className="ms-auto">
                        <span className="text-green d-inline-flex align-items-center lh-1">
                            100%
                        </span>
                    </div>
                </div>
                <div className="progress progress-sm">
                    <div className="progress-bar bg-primary" style={{width: `${percentage}%`}} role="progressbar" aria-valuenow={percentage} aria-valuemin={0} aria-valuemax={percentage} aria-label={`${percentage}% Complete`}>
                        <span className="visually-hidden">75% Complete</span>
                    </div>
                </div>
            </div>
        </div>
    )
}