import React, { useCallback } from "react";

interface TabHeaderProps {
  isActive: boolean;
  label: string;
  onClick: (label: string) => void;
}

export default function TabHeader({
  isActive,
  label,
  onClick,
}: TabHeaderProps) {
  const handleClick = useCallback(() => onClick(label), [onClick, label]);

  const className = isActive
    ? "tab-list-item tab-list-active"
    : "tab-list-item tab-list-inactive";

  return (
    <li className={className} onClick={handleClick}>
      {label}
    </li>
  );
}