"use strict";
"use client";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var gsap_1 = __importDefault(require("gsap"));
var ScrollTrigger_1 = __importDefault(require("gsap/ScrollTrigger"));
gsap_1.default.registerPlugin(ScrollTrigger_1.default);
var useHighlight_1 = require("./hooks/useHighlight");
var styles = {
    highlight: "\n    .react-scroll-text-highlight {\n      position: relative;\n      display: inline-block;\n      box-sizing: border-box;\n      --animate-width: 0%;\n      --animate-padding-X: 0em;\n    }\n\n    .react-scroll-text-highlight::before {\n      position: absolute;\n      inset: 0;\n      overflow: hidden;\n      transform-origin: left;\n      width: var(--animate-width);\n      padding-left: var(--animate-padding-X);\n      padding-right: var(--animate-padding-X);\n      box-sizing: inherit;\n      content: \"\";\n      background-color: var(--highlight-color);\n      border-radius: 100em;\n      margin: -0.2em 0;\n    }\n\n    .react-scroll-text-highlight::after {\n      content: attr(highlight-text);\n      position: absolute;\n      inset: 0;\n      color: var(--text-color);\n      padding: 0.2em 0.3em;\n      margin-top: -0.2em;\n      margin-bottom: -0.2em;\n      overflow: hidden;\n      pointer-events: none;\n      clip-path: inset(0 calc(100% - var(--animate-width)) -0.1em 0 round 100em);\n      border-radius: 100em;\n    }\n  ",
};
var TextHighlight = function (_a) {
    var children = _a.children, textColor = _a.textColor, highlightColor = _a.highlightColor, start = _a.start, end = _a.end;
    var highLightRef = (0, useHighlight_1.useHighlight)({
        textColor: textColor,
        highlightColor: highlightColor,
        start: start,
        end: end,
    });
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("style", null, styles.highlight),
        react_1.default.createElement("span", { ref: highLightRef }, children)));
};
exports.default = TextHighlight;
