import React from "react";
import { TbCheck, TbX } from "react-icons/tb";
import { cn } from "./cn";

export default function StepRow({ ok, title, subtitle, action }) {
  return (
    <div className="flex items-center gap-3 p-4">
      <div className="w-10 h-10 rounded-xl shadow bg-white/70 dark:bg-white/10 border border-black/10 dark:border-white/10 flex items-center justify-center">
        {ok ? (
          <TbCheck className="h-5 w-5 text-white bg-green-600 p-1 rounded-xl" />
        ) : (
          <TbX className="h-5 w-5 text-white bg-[#001f3f] p-1 rounded-xl" />
        )}
      </div>

      <div className="flex-1 min-w-0">
        <div className="text-sm font-semibold text-black dark:text-white">{title}</div>
        {subtitle ? (
          <div className="text-xs text-black/60 dark:text-white/70 truncate">{subtitle}</div>
        ) : (
          <div className="text-xs text-black/40 dark:text-white/50">{ok ? "انجام شده" : "انجام نشده"}</div>
        )}
      </div>

      {action ? <div className={cn("shrink-0")}>{action}</div> : null}
    </div>
  );
}
