import React from 'react';
import { Link } from 'react-router-dom';

interface IBreadcrumb {
  to?: string;
  title: string;
}

type BreadcrumbsProps = {
  breadcrumbs: Array<IBreadcrumb>;
};

export default function Breadcrumbs({ breadcrumbs }: BreadcrumbsProps) {
  return (
    <nav className="hidden sm:flex items-center text-sm leading-5 font-medium">
      {breadcrumbs.map((o, i) => (
        <React.Fragment key={`breadcrumbs-${i}`}>
          {o.to && (
            <Link
              to={o.to}
              className="dark:text-gray-100 dark:hover:text-gray-400 text-gray-600 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out"
            >
              {o.title}
            </Link>
          )}

          {!o.to && (
            <span className="text-gray-400 dark:text-gray-200">{o.title}</span>
          )}

          {breadcrumbs.length - 1 !== i && (
            <svg
              className="flex-shrink-0 mx-2 h-5 w-5 text-gray-400"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path
                fillRule="evenodd"
                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                clipRule="evenodd"
              />
            </svg>
          )}
        </React.Fragment>
      ))}
    </nav>
  );
}
