import { cn } from "@/lib/utils";
import { FC } from "react";

interface Props {
  img: string;
  title: string;
  className?: string;
  iconClassName?: string;
}

export const ThemeCard: FC<Props> = ({
  className,
  img,
  title,
  iconClassName,
}) => {
  return (
    <article
      className={cn(
        "bg-bg_surface_container relative hover:bg-teritary_surface_container transition-all md:px-6 px-2 md:h-[224px] h-[124px]",
        className
      )}
    >
      <div className="bg-primary size-full -z-[10] absolute top-2.5 left-2.5" />
      <div
        className={cn("md:size-[84px] size-12 bg-teritary p-3", iconClassName)}
      >
        <img src={img} alt="theme icon" />
      </div>
      <h3 className="md:mt-6 mt-2 md:text-xl text-sm">{title}</h3>
    </article>
  );
};