import { Input } from '@/components/ui/input';
import { Infinity as InfinityIcon } from 'lucide-react';
import type { LimitKey } from './types';

export default function LimitsTab({
    limitKeys,
    limits,
    onChange,
}: {
    limitKeys: LimitKey[];
    limits: Record<string, string>;
    onChange: (key: string, value: string) => void;
}) {
    return (
        <div className="pf-glass rounded-xl p-5">
            <p className="text-muted-foreground mb-5 text-xs">
                Leave blank for unlimited. Integer values only (except storage
                which accepts decimals).
            </p>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {limitKeys.map((lk) => (
                    <div key={lk.key} className="space-y-1.5">
                        <label className="text-muted-foreground block text-xs font-semibold tracking-wide uppercase">
                            {lk.label}
                        </label>
                        <div className="relative">
                            <Input
                                type="number"
                                min={0}
                                value={limits[lk.key] ?? ''}
                                onChange={(e) =>
                                    onChange(lk.key, e.target.value)
                                }
                                placeholder="Unlimited"
                                className="pr-16"
                            />
                            <span className="text-muted-foreground dark:text-muted-foreground/60 pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-xs">
                                {limits[lk.key] === '' ? (
                                    <InfinityIcon className="h-3.5 w-3.5" />
                                ) : (
                                    lk.unit
                                )}
                            </span>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}