import React from "react";

interface ModuleHeaderProps {
  title: string;
  breadcrumbs?: Array<{
    name: string;
    href?: string;
  }>;
}

const ModuleHeader: React.FC<ModuleHeaderProps> = ({
  title,
  breadcrumbs = [],
}) => {
  return (
    <div className="bg-white border-b border-gray-200 px-4 py-3">
      {/* Breadcrumb Navigation */}
      <nav className="flex" aria-label="Breadcrumb">
        <ol className="flex items-center space-x-1 text-sm">
          <li>
            <div className="flex items-center">
              <svg
                className="h-4 w-4 text-gray-400"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
                />
              </svg>
              <span className="ml-1 font-medium text-gray-500">Anasayfa</span>
            </div>
          </li>

          {breadcrumbs.map((breadcrumb, index) => (
            <li key={index}>
              <div className="flex items-center">
                <span className="text-gray-400 mx-2">/</span>
                <span className="font-medium text-gray-500">
                  {breadcrumb.name}
                </span>
              </div>
            </li>
          ))}

          <li>
            <div className="flex items-center">
              <span className="text-gray-400 mx-2">/</span>
              <span className="font-medium text-gray-900" aria-current="page">
                {title}
              </span>
            </div>
          </li>
        </ol>
      </nav>
    </div>
  );
};

export default ModuleHeader;