// frontend/components/journey/FinishTile.tsx — 마무리 타일 (원본 tile)
import { forwardRef } from "react";
import { Icon } from "@/components/Icon";
import type { IconName } from "@/components/icons/paths";
import type { TileCard } from "@/lib/types";

type Hover = {
  className: string;
  onMouseEnter: () => void;
  onMouseLeave: () => void;
};

export const FinishTile = forwardRef<HTMLDivElement, { card: TileCard; hover: Hover }>(
  function FinishTile({ card, hover }, ref) {
    return (
      <div
        className={hover.className}
        ref={ref}
        onMouseEnter={hover.onMouseEnter}
        onMouseLeave={hover.onMouseLeave}
      >
        <div className="tic">
          <Icon name={card.icon as IconName} />
        </div>
        <div className="tt">{card.tt}</div>
        <div className="ts">{card.ts}</div>
      </div>
    );
  },
);