/**
 * BorderWidthEditor Component
 * Per-side border width input with unit selection (px, em, rem, etc.)
 * Follows Elementor-style UI pattern with linked/unlinked sides
 */

import { t } from '@/lib/i18n'
import { CSSUnit } from './NumberWithUnitInput'
import { FourSideBoxEditor } from './FourSideBoxEditor'

export interface BorderWidthValue {
    top: string
    right: string
    bottom: string
    left: string
}

interface BorderWidthEditorProps {
    value: BorderWidthValue
    onChange: (value: BorderWidthValue) => void
    label?: string
    disabled?: boolean
    allowedUnits?: CSSUnit[]
}

const DEFAULT_VALUE: BorderWidthValue = {
    top: '1px',
    right: '1px',
    bottom: '1px',
    left: '1px',
}

/**
 * Check if all sides have the same value
 */
// (linking logic is handled by FourSideBoxEditor)

export function BorderWidthEditor({
    value = DEFAULT_VALUE,
    onChange,
    label = t('Border Width'),
    disabled = false,
    allowedUnits = ['px', 'em', 'rem'],
}: BorderWidthEditorProps) {
    return (
        <FourSideBoxEditor
            label={label}
            value={value}
            onChange={onChange}
            disabled={disabled}
            allowedUnits={allowedUnits}
        />
    )
}

export default BorderWidthEditor

