import { FC } from "react";
import Image from "next/image";

interface BadgeProps {
  type: string;
}

const iconSrc: Record<string, string> = {
  summer: "/fabric/season-summer.png",
  winter: "/fabric/season-winter.png",
  spring: "/fabric/season-spring.png",
  fall: "/fabric/season-fall.png",
};

const Badge: FC<BadgeProps> = ({ type }) => {
  const icon = iconSrc[type];

  return (
    <div
      className={`inline-flex flex-row gap-4 items-center justify-center align-middle capitalize`}
    >
      <div className="inline-flex h-4 w-4">
        {icon && (
        <Image
          src={icon}
          alt={type}
          width={32}
          height={32}
          className="img-responsive"
        />
      )}
      </div>
      {/* <div>
        <span className="font-bogart text-xs">{type}</span>
      </div> */}
    </div>
  );
};

export default Badge;