"use client";

import React from "react";

interface TitleProps {
  text: string;
  className?: string;
}

export default function Title({ text, className = "" }: TitleProps) {

  const defaultAlign = !className.includes("text-left") && !className.includes("text-right")
    ? "mx-auto text-center"
    : "";

  return (
    <div className={`w-fit ${defaultAlign} ${className}`}>
      <h2
        className="
          text-lg sm:text-xl md:text-2xl font-bold 
          text-gray-700 dark:text-gray-200 tracking-tight relative
        "
      >
        {text}
        <span
          className="
            block h-[5px] bg-cyan-700
            dark:bg-neutral-200
            mt-1 rounded-full
          "
        ></span>
      </h2>
    </div>
  );
}
