import type { Tag } from "../../types/recipe";

interface TagListProps {
  tags: Tag[]
  created: Date
  modified: Date | null;
}

function FormatDate(date: Date): string {
  return new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit"
  }).format(date);
}

export default function TagList({ tags, created, modified }: TagListProps) {


  return (
    <div className="px-4 py-4 md:px-8">
      {tags && (
        <>
          <h2 className="text-2xl text-gray-800 font-semibold mb-2">Tags</h2>
          <hr className="text-gray-300" />
          <ul id="tag-list" className="my-4 flex gap-1 flex-wrap">
            {tags.map(tag => (
              <li key={tag.Id} className="text-sm items-center bg-blue-100 text-blue-700 w-fit px-3 py-1.5 rounded-full">
                {tag.Name}
              </li>

            ))}
          </ul>
        </>
      )}
      <hr className="text-gray-300" />
      <p className="my-4 mb-1.5 text-sm text-gray-700">Created: {FormatDate(new Date(created))}</p>
      {modified && (
        <p className="mb-4 text-sm text-gray-700">Last Modified: {FormatDate(new Date(modified))}</p>
      )}
    </div>
  );
}
