"use client";

import { getResolutionsForPlan } from "@/lib/plans";

type Props = {
  value: string;
  onChange: (value: string) => void;
  disabled?: boolean;
};

export function ResolutionSelect({ value, onChange, disabled }: Props) {
  const resolutions = getResolutionsForPlan();

  return (
    <select
      value={value}
      onChange={(e) => onChange(e.target.value)}
      disabled={disabled}
      className="w-full rounded border border-gray-600 bg-surface-light px-3 py-2 text-sm text-white focus:border-accent focus:outline-none disabled:opacity-50"
    >
      {resolutions.map((r) => (
        <option key={r.value} value={r.value}>
          {r.label}
        </option>
      ))}
    </select>
  );
}