import { jsxs, jsx } from 'react/jsx-runtime';
import { useContext } from 'react';
import { cn } from '../../../utils/cn.js';
import { ColorPickerContext } from './ColorPicker.js';
import { formatRgb, hslToRgb } from './colorUtils.js';

/**
 * ColorPickerSwatch - Visual color preview with optional checkerboard background
 * Shows the current color with transparency support
 */
const ColorPickerSwatch = ({ size = 'md', showCheckerboard = true, className, ...props }) => {
    const context = useContext(ColorPickerContext);
    if (!context) {
        throw new Error('ColorPickerSwatch must be used within a ColorPicker');
    }
    const { color, theme } = context;
    const { h, s, l, a } = color;
    // Convert HSL to RGB for display
    hslToRgb(h, s, l);
    const rgbaColor = formatRgb(h, s, l, a);
    // Size variants
    const sizeClasses = {
        sm: 'size-5',
        md: 'size-6',
        lg: 'size-8',
    };
    return (jsxs("div", { className: cn(theme.swatchStyle, sizeClasses[size], className), role: "img", "aria-label": `Color: ${rgbaColor}`, ...props, children: [showCheckerboard && a < 1 && (jsx("div", { className: "absolute inset-0", style: {
                    backgroundImage: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")',
                    backgroundSize: '8px 8px',
                    backgroundPosition: '0 0',
                } })), jsx("div", { className: "absolute inset-0", style: {
                    backgroundColor: rgbaColor,
                } })] }));
};
ColorPickerSwatch.displayName = 'ColorPickerSwatch';

export { ColorPickerSwatch };
