import { ReactNode } from "react"
import ArrowActionList from "@/shared/icons/home-page/arrowActionList.svg";
import DeleteActinIcon from "@/shared/icons/home-page/actions/delete.svg";
import DownloadActinIcon from "@/shared/icons/home-page/actions/download.svg";
import ChangeActinIcon from "@/shared/icons/home-page/actions/change.svg";
import DateIcon from "@/shared/icons/home-page/dateIcon.svg";
import Link from "next/link";
import { TLogItem } from "@/services/types/logs.type";
import { formateDate } from "@/shared/utils/formate-date";
import { TLogAction } from "@/shared/types/home/logs";

type TActionCardProps = {
  status: string;
  log: TLogItem;
}

const cardIcon: Record<TLogAction, ReactNode> = {
  all: <DeleteActinIcon />,
  // download: <DownloadActinIcon />,
  delete: <DownloadActinIcon />,
  update: <ChangeActinIcon />,
  create: <DeleteActinIcon />,
};

const ActionCard = ({
  status,
  log,
}: TActionCardProps) => {
  const { id, action, user_data: { first_name, last_name } } = log;
  return (
    <Link href={"/"} className="flex items-center justify-between h-[87px] rounded-lg border pt-[14px] pr-4 pb-[14px] pl-4">
      <div className="flex items-center gap-5">
        <span>{cardIcon[status as TLogAction]}</span>
        <div className="flex flex-col gap-1.5">
          <div className="font-medium text-[18px] leading-[140%] truncate whitespace-nowrap overflow-hidden max-w-[250px]" title={`${first_name} ${last_name}`}>{first_name} {action} epayment / Services / we</div>
          <div className="flex items-center gap-2.5">
            <DateIcon />
            <span className="text-[16px] leading-[140%] align-middle">{formateDate(log.created_at)}</span>
          </div>
        </div>
      </div>
      <ArrowActionList />
    </Link>
  )
}

export default ActionCard