"use client";

import { useTheme } from "@/lib/theme";
import { Sun, Moon, Type } from "lucide-react";

export function AppearanceTab() {
  const { theme, setTheme, fontSize, setFontSize } = useTheme();

  const themes = [
    { key: "light" as const, label: "Light", icon: Sun },
    { key: "dark" as const, label: "Dark", icon: Moon },
  ];

  const fontSizes = [
    { key: "small" as const, label: "Small" },
    { key: "medium" as const, label: "Medium" },
    { key: "large" as const, label: "Large" },
  ];

  return (
    <div className="space-y-6">
      {/* Theme */}
      <div>
        <h3 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
          <Sun size={16} className="text-slack-purple" />
          Theme
        </h3>
        <div className="flex gap-4">
          {themes.map((opt) => {
            const Icon = opt.icon;
            const isActive = theme === opt.key;
            return (
              <button
                key={opt.key}
                type="button"
                onClick={() => setTheme(opt.key)}
                className={`flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-colors ${
                  isActive
                    ? "border-slack-purple bg-slack-purple/5"
                    : "border-gray-200 hover:border-gray-300"
                }`}
              >
                <Icon size={24} className={isActive ? "text-slack-purple" : "text-gray-400"} />
                <span className={`text-sm font-medium ${isActive ? "text-slack-purple" : "text-gray-600"}`}>
                  {opt.label}
                </span>
              </button>
            );
          })}
        </div>
        <p className="text-xs text-gray-400 mt-3">
          Theme changes apply instantly and persist across sessions.
        </p>
      </div>

      {/* Font size */}
      <div>
        <h3 className="font-bold text-gray-800 mb-3 flex items-center gap-2">
          <Type size={16} className="text-slack-purple" />
          Font Size
        </h3>
        <div className="flex gap-3">
          {fontSizes.map((opt) => {
            const isActive = fontSize === opt.key;
            return (
              <button
                key={opt.key}
                type="button"
                onClick={() => setFontSize(opt.key)}
                className={`px-5 py-2 rounded-md border-2 transition-colors ${
                  isActive
                    ? "border-slack-purple bg-slack-purple/5 text-slack-purple"
                    : "border-gray-200 text-gray-600 hover:border-gray-300"
                }`}
              >
                <span className="text-sm font-medium">{opt.label}</span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}