import Link from "next/link";

export default function Keywords({ keywords, keywords_slug }) {
  const arr = keywords.split(",");
  var tags = keywords_slug.split(",,");
  tags.pop();
  tags.shift();

  return (
    <div className="my-4 ">
      {arr.map((item, key) => (
        <Link
          title={item.trim()}
          className="text-sm  inline-block bg-gray-100 text-black mr-2 rounded-full px-3 py-2 mb-2 transition-all hover:shadow-md hover:bg-gray-50"
          key={key}
          href={`/tag/${tags[key]}`}
        >
          #{item.trim()}
        </Link>
      ))}
    </div>
  );
}
