<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound, WordPress.DB.SlowDBQuery.slow_db_query_meta_key -- Template-scope variables and single-post admin meta reads, not globals or slow queries.
if ( ! defined( 'ABSPATH' ) ) { exit; }

/**
 * Reusable color picker field (uses browser native color input with hex fallback).
 *
 * @param array $args {
 *   @type string $id
 *   @type string $label
 *   @type string $value       Hex color value, e.g. '#4a9eff'
 *   @type string $description
 *   @type bool   $disabled
 * }
 */
if ( ! isset( $args ) ) { return; }
$id       = isset( $args['id'] )          ? $args['id']          : '';
$label    = isset( $args['label'] )       ? $args['label']       : '';
$value    = isset( $args['value'] )       ? $args['value']       : '';
$desc     = isset( $args['description'] ) ? $args['description'] : '';
$disabled = ! empty( $args['disabled'] );
?>
<div class="tncfb-field tncfb-field-color<?php echo $disabled ? ' tncfb-field-disabled' : ''; ?>">
    <?php if ( $label ) : ?>
        <label for="<?php echo esc_attr( $id ); ?>" class="tncfb-label"><?php echo esc_html( $label ); ?></label>
    <?php endif; ?>
    <div class="tncfb-color-wrap">
        <input
            type="color"
            id="<?php echo esc_attr( $id ); ?>_picker"
            value="<?php echo esc_attr( $value ); ?>"
            data-target="<?php echo esc_attr( $id ); ?>"
            <?php disabled( $disabled, true ); ?>
        />
        <input
            type="text"
            id="<?php echo esc_attr( $id ); ?>"
            name="<?php echo esc_attr( $id ); ?>"
            value="<?php echo esc_attr( $value ); ?>"
            class="tncfb-color-text"
            placeholder="#rrggbb"
            maxlength="9"
            <?php disabled( $disabled, true ); ?>
        />
    </div>
    <?php if ( $desc ) : ?>
        <p class="tncfb-field-desc"><?php echo esc_html( $desc ); ?></p>
    <?php endif; ?>
</div>
