"use client";
import type { SettingsBlock } from "@/types/page";
import { Settings, Edit, Lock } from "lucide-react";

export default function SettingsBlockView({ category, editable }: SettingsBlock) {
    return (
        <div className="w-full rounded-xl border border-gray-200 dark:border-gray-700 p-6 bg-white dark:bg-gray-800">
            <div className="flex items-center gap-3 mb-4">
                <Settings className="w-5 h-5 text-gray-600 dark:text-gray-400" />
                <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
                    设置 - {category}
                </h3>
                {editable ? (
                    <Edit className="w-4 h-4 text-green-600" />
                ) : (
                    <Lock className="w-4 h-4 text-gray-400" />
                )}
            </div>

            <div className="space-y-3">
                <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <span className="text-sm text-gray-600 dark:text-gray-400">类别</span>
                    <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{category}</span>
                </div>

                <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                    <span className="text-sm text-gray-600 dark:text-gray-400">编辑权限</span>
                    <span className={`text-sm font-medium ${editable ? 'text-green-600' : 'text-gray-500'}`}>
                        {editable ? '可编辑' : '只读'}
                    </span>
                </div>
            </div>

            {editable && (
                <button className="mt-4 w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                    编辑设置
                </button>
            )}
        </div>
    );
}