import type { ReactNode } from "react";

interface DashboardSectionTitleProps {
  icon: ReactNode;
  title: string;
  right?: ReactNode;
}

export default function DashboardSectionTitle({
  icon,
  title,
  right,
}: DashboardSectionTitleProps) {
  return (
    <div className="mb-6 flex items-center justify-between gap-4">
      <div className="flex items-center gap-4">
        <span className="flex h-12.5 w-12.5 items-center justify-center rounded-full border-2 border-[#AEC4FF]/30 bg-white/60 text-link-1">
          {icon}
        </span>

        <h2 className="font-heading text-xl md:text-2xl font-semibold text-heading">
          {title}
        </h2>
      </div>

      {right}
    </div>
  );
}