"use client";

import { useState } from "react";
import { Slider, SliderThumb } from "@blifedesarrollo/blife-ui/slider";
import { Tooltip, TooltipContent, TooltipTrigger } from "@blifedesarrollo/blife-ui/tooltip";
import { Field } from "@blifedesarrollo/blife-ui/field";
import { Badge } from "@blifedesarrollo/blife-ui/badge";

export function TooltipDemo() {
  const [range, setRange] = useState([40]);
  const [start] = range;
  const label = `${start}%`;

  return (
    <Field
      className="w-[280px]"
      label="Comisión"
      labelComplement="(%)"
      hint="Establecer el porcentaje de comisión"
    >
      <div className="flex w-full items-center gap-3">
        <Slider className="w-full" value={range} min={0} max={100} onValueChange={setRange}>
          <TooltipWrapper content={label}>
            <SliderThumb />
          </TooltipWrapper>
        </Slider>
        <Badge
          variant="outlined"
          color="neutral"
          size="small"
          className="w-11 tabular-nums justify-center shrink-0"
        >
          {label}
        </Badge>
      </div>
    </Field>
  );
}

const TooltipWrapper = ({ content, children }: { content: string; children: React.ReactNode }) => (
  <Tooltip variant="light" offset={12}>
    <TooltipTrigger asChild>{children}</TooltipTrigger>
    <TooltipContent className="text-paragraph-xs">
      <p className="text-text-strong font-medium">{content}</p>
    </TooltipContent>
  </Tooltip>
);
Slider

Rango

Con Tooltip

Colores
