"use client";

import { useTextSize, type TextSize } from "@/lib/contexts/TextSizeContext";

interface TextSizeControlProps {
  lang: "ar" | "en";
}

export default function TextSizeControl({ lang }: TextSizeControlProps) {
  const { textSize, updateTextSize, labels, sizes } = useTextSize();
  const isAr = lang === "ar";

  const handleSizeChange = (size: TextSize) => {
    updateTextSize(size);
  };

  const currentLabels = labels[lang];
  const currentSizes = sizes[lang];

  return (
    <div className="sticky top-24 bg-white dark:bg-slate-800 rounded-2xl shadow-lg border border-gray-200 dark:border-slate-700 p-6">
      <div className="flex items-center gap-3 mb-4">
        <svg
          className="w-5 h-5 text-brand-green"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
          />
        </svg>
        <h3 className="text-sm font-bold text-gray-900 dark:text-white">
          {isAr ? "حجم النص" : "Text Size"}
        </h3>
      </div>

      <div className="space-y-2">
        {(["small", "medium", "large"] as TextSize[]).map((size) => (
          <button
            key={size}
            onClick={() => handleSizeChange(size)}
            className={`w-full px-4 py-3 rounded-xl text-sm font-medium transition-all duration-200 ${
              textSize === size
                ? "bg-gradient-to-r from-brand-green to-emerald-600 text-white shadow-md"
                : "bg-gray-100 dark:bg-slate-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-slate-600"
            }`}
          >
            <div className="flex items-center justify-between">
              <span>{currentLabels[size]}</span>
              <span className="text-xs opacity-75">{currentSizes[size]}</span>
            </div>
          </button>
        ))}
      </div>

      <div className="mt-4 pt-4 border-t border-gray-200 dark:border-slate-700">
        <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
          {isAr
            ? "تفضيلك محفوظ تلقائياً"
            : "Your preference is saved automatically"}
        </p>
      </div>
    </div>
  );
}