Function PatternCard

src/components/patterns/pattern-card.tsx:19–193

({
  pattern,
  activePattern,
  setActivePattern,
  theme,
  activeMobileCard,
  setActiveMobileCard,
}: PatternCardProps)

}

export default function PatternCard({
  pattern,
  activePattern,
  setActivePattern,
  theme,
  activeMobileCard,
  setActiveMobileCard,
}: PatternCardProps) {
  const { copyToClipboard, isCopied } = useCopy();
  const { toggleFavourite, isFavourite } = useFavorites();
  const isPatternDark = theme === "dark";

  const previewPattern = (patternId: string) => {
    setActivePattern(patternId === activePattern ? null : patternId);
    setTimeout(() => {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }, 200);
  };

  const handleCardInteraction = (patternId: string) => {
    setActiveMobileCard(activeMobileCard === patternId ? null : patternId);
  };

  return (
    <div className="group relative">
      <div
        className={`relative aspect-square rounded-xl sm:rounded-2xl overflow-hidden bg-background shadow-sm transition-all duration-300 ${activePattern === pattern.id
            ? "ring-2 ring-primary ring-offset-2"
            : ""
          } ${activeMobileCard === pattern.id
            ? "scale-[1.02] shadow-lg sm:scale-100"
            : "hover:shadow-lg hover:scale-[1.02]"
          }`}
        onClick={() => handleCardInteraction(pattern.id)}
      >
        {/* Favorite Button with Star Icon */}
        <button
          onClick={(e) => {
            e.stopPropagation();
            toggleFavourite(pattern.id);
          }}
          className={`absolute top-2 left-2 z-10 p-2 rounded-full backdrop-blur-md shadow-lg border transition-all cursor-pointer duration-200 hover:scale-110 group/star ${isFavourite(pattern.id)
              ? isPatternDark
                ? "bg-yellow-500/20 border-yellow-400/30 text-yellow-400"
                : "bg-yellow-500/20 border-yellow-500/30 text-yellow-600"
              : isPatternDark
                ? "bg-black/20 border-white/20 text-white hover:bg-black/30 hover:border-white/30"
                : "bg-black/20 border-white/30 text-white hover:bg-black/30 hover:border-white/40"
            }`}
          title={
            isFavourite(pattern.id)
              ? "Remove from favorites"
              : "Add to favorites"
          }
        >
          <Star
            className={`h-4 w-4 transition-all duration-200 ${isFavourite(pattern.id)
                ? "fill-current scale-110"