"use client";

import Link from "next/link";
import { useTranslations } from "next-intl";

export function VideoTemplatesHero() {
  const t = useTranslations("auto.componentsTemplatesVideoVideoTemplatesHero");
  return (
    <div className="mb-6">
      <nav aria-label="Breadcrumb" className="mb-1 text-xs text-gray-400">
        <Link href="/" className="hover:text-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 rounded-sm">
          {t("breadcrumbHome")}
        </Link>
        <span aria-hidden className="mx-1">
          ›
        </span>
        <span>{t("breadcrumbTemplates")}</span>
      </nav>
      <h1 className="text-2xl font-bold text-gray-900">
        {t("title")}
      </h1>
      <p className="mt-1 max-w-2xl text-sm text-gray-500">
        {t("subtitle")}
      </p>
    </div>
  );
}
