/**
 * CustomCssGroup Component
 *
 * Settings group for custom CSS input.
 * Contains: textarea with syntax highlighting hints.
 *
 * Supports two modes:
 * - compact: For floating settings panel
 * - default: For sidebar settings
 */

import { TrashIcon } from "@radix-ui/react-icons";

interface CustomCssGroupProps {
  value: string;
  onChange: (value: string) => void;
  compact?: boolean;
}

export function CustomCssGroup({ value, onChange, compact = false }: CustomCssGroupProps) {
  const handleClear = () => {
    onChange("");
  };

  // Compact mode - for floating settings panel
  if (compact) {
    return (
      <div className="floating-popover__custom-css">
        {/* Textarea */}
        <textarea
          className="floating-settings__textarea floating-settings__textarea--code"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={`.oppb-price-container {
  /* Your custom styles */
}

.oppb-regular-price {
  font-weight: bold;
}`}
          rows={8}
          spellCheck={false}
        />

        {/* Clear button */}
        {value && (
          <button type="button" className="floating-popover__clear-btn" onClick={handleClear}>
            <TrashIcon className="w-3 h-3" />
            <span>Clear CSS</span>
          </button>
        )}
      </div>
    );
  }

  // Default mode - for sidebar settings
  return (
    <div className="custom-css-group">
      {/* Textarea */}
      <textarea
        className="custom-css-group__textarea"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={`.oppb-price-container {
  /* Your custom styles */
}

.oppb-regular-price {
  font-weight: bold;
}`}
        rows={8}
        spellCheck={false}
      />
      {value && (
        <button type="button" className="custom-css-group__btn custom-css-group__btn--clear" onClick={handleClear}>
          Clear
        </button>
      )}
    </div>
  );
}

export default CustomCssGroup;
