/**
 * Linked Appearance Field Component
 * Shows a field that can be linked to a preset or unlinked for manual editing
 * @since 1.3.0
 */

import { Link2Off } from 'lucide-react'
import { t, sprintf } from '@/lib/i18n'

interface LinkedAppearanceFieldProps {
    label: string
    fieldKey: string
    isLinked: boolean
    linkedPresetName?: string
    onUnlink: () => void
    children: React.ReactNode
}

export function LinkedAppearanceField({
    label,
    fieldKey: _fieldKey, // Keep for future use (e.g., analytics)
    isLinked,
    linkedPresetName,
    onUnlink,
    children,
}: LinkedAppearanceFieldProps) {
    void _fieldKey // Suppress unused warning
    return (
        <div className={`relative ${isLinked ? 'ring-2 ring-blue-200 rounded-lg p-3 bg-blue-50/30' : ''}`}>
            <div className="flex items-center justify-between mb-2">
                <label className="block text-sm font-medium text-gray-700">
                    {label}
                    {isLinked && (
                        <span className="ms-2 text-blue-600" title={sprintf(t('Linked to appearance preset "%s"'), linkedPresetName || '')}>
                            🔗
                        </span>
                    )}
                </label>
                {isLinked && (
                    <button
                        type="button"
                        onClick={onUnlink}
                        className="text-xs text-blue-600 hover:text-blue-800 flex items-center gap-1 transition-colors"
                        title={t('Unlink from appearance preset and edit manually')}
                    >
                        <Link2Off className="w-3 h-3" />
                        {t('Unlink')}
                    </button>
                )}
            </div>

            {children}

            {isLinked && linkedPresetName && (
                <p className="text-xs text-blue-600 mt-1">
                    {sprintf(t('This value comes from appearance preset "%s". Click "Unlink" for manual editing.'), linkedPresetName)}
                </p>
            )}
        </div>
    )
}

