"use client";

import React, { useMemo } from "react";

interface StateItem {
  state: number | string;
  text: string;
  backgroundColor?: string;
  textColor?: string;
}

interface PropsStateActive {
  isBox?: boolean;
  stateActive: number | string;
  listState: StateItem[];
}

function StateActive({
  isBox = true,
  stateActive,
  listState,
}: PropsStateActive) {
  // memo trạng thái hiện tại
  const current = useMemo(() => {
    return listState.find((item) => item.state === stateActive);
  }, [stateActive, listState]);

  if (isBox) {
    return (
      <div
        className="
          w-fit rounded-full text-sm font-normal
        "
        style={{
          color: current?.textColor ?? "#202939",
          backgroundColor: current?.backgroundColor,
          padding: current?.backgroundColor ? "6px 12px" : undefined,
        }}
      >
        {current?.text ?? "---"}
      </div>
    );
  }

  return (
    <div className="flex items-center gap-1.5 w-fit">
      {/* DOT */}
      <div
        className="w-3 h-3 rounded-full"
        style={{ backgroundColor: current?.backgroundColor }}
      />

      {/* TEXT */}
      <p
        className="text-sm font-medium"
        style={{ color: current?.textColor ?? "#23262f" }}
      >
        {current?.text ?? "---"}
      </p>
    </div>
  );
}

export default StateActive;