/* eslint-disable @next/next/no-img-element */
import React from "react";

type FMDHexagonalCardProps = {
  img: string;
  extraClassName?: string;
};

const FMDHexagonalCard = ({
  img,
  extraClassName = "",
}: FMDHexagonalCardProps) => {
  return (
    <div
      className={`w-[500px] h-[500px] relative odd:lg:mb-[150px] ${extraClassName}`}
    >
      <img
        src={img}
        alt="alt image"
        className="w-full h-full object-cover bg-center transition-all ease-in-out cursor-pointer"
        style={{
          clipPath:
            "polygon(0% 0%, 70% 0%, 100% 30%, 100% 100%, 30% 100%, 0% 70%)",
        }}
      />
    </div>
  );
};

export default FMDHexagonalCard;