"use client";
import { Separator } from "@/Components/ui/separator";
import React from "react";
import BoldIcon from "@/components/ui/BoldIcon";
import { useTranslation } from "react-i18next";
import Image from "next/image";


interface OrderItem  {
    id: string;
    date: string;                
    orderCode: string;
    amount: string;              
    statusLabel: string;         
    statusDetail?: string;      
    images: string[];            
    rating: number;             
    invoiceUrl?: string;         
  };

export default function OrdersCart({ order }: { order: OrderItem }) {
  const { t } = useTranslation("common");


  return (
    <div className="w-full border-2 gap-y-3.5 rounded-xl p-3.5  flex flex-col items-center">
      <div className="flex items-center justify-between w-full">
        <div className="flex justify-center items-center gap-2.5">
          <span className="">
            <BoldIcon name="task" size={28} tinted className="text-cyan-600 dark:text-neutral-600" />
          </span>
          <span className="font-bold text-neutral-600 dark:text-neutral-300">
          {order.statusLabel}
          </span>
        </div>
        <span className="ltr:rotate-180">
          <BoldIcon name="arrow-right-2" size={24} tinted className="text-neutral-600 dark:text-neutral-300" />
        </span>
      </div>
      <div className=" text-sm max-sm:text-xs w-full flex gap-3.5">
        <div className="flex gap-2 flex-wrap">
          <span className="font-medium text-neutral-400">
            {t("orderCart.date")}:{" "}
          </span>
          <span className="font-bold text-neutral-800 dark:text-neutral-200">
          {order.date}
          </span>
        </div>
        <div className="flex gap-2 flex-wrap">
          <span className="font-medium text-neutral-400">
            {t("orderCart.Order_code")}:{" "}
          </span>
          <span className="font-bold text-neutral-800 dark:text-neutral-200">
          {order.orderCode}
          </span>
        </div>
        <div className="flex gap-2 flex-wrap">
          <span className="font-medium text-neutral-400">
            {t("orderCart.Amount")}:{" "}
          </span>
          <span className="font-bold text-neutral-800 dark:text-neutral-200">
          {order.amount}
          </span>
        </div>
      </div>
      <div className=" max-sm:text-sm w-full flex gap-3.5">
        <div className="flex gap-2 flex-wrap">
          <span className="font-medium text-neutral-400">
            {t("orderCart.Order_status")}:{" "}
          </span>
          <span className="font-bold text-cyan-600 dark:text-neutral-600">
           {order.statusDetail}
          </span>
        </div>
      </div>
      <div className="w-full flex gap-2 flex-wrap">
        {order.images.map((src, idx) => (
          <Image key={idx} alt={`img-${idx}`} src={src} height={70} width={70} className="object-cover object-center" />
        ))}
      </div>
      <Separator />
      <div className="flex items-center justify-between w-full">
        <div className="flex justify-center items-center gap-2.5">
          <span className="font-medium max-sm:hidden text-neutral-400">
          {t("orderCart.Your_rating_for_this_order")}:{" "}
          </span>
          <span className="font-bold flex justify-center items-center gap-0.5 flex-row-reverse text-neutral-600 dark:text-neutral-300">
          {order.rating} <BoldIcon name="star" size={20} tinted className="text-amber-400" />
          </span>
        </div>
        <div className="flex  cursor-pointer justify-center items-center gap-2.5">
          <span className="">
            <BoldIcon name="document-text" size={20} tinted className="text-cyan-800 dark:text-neutral-200" />
          </span>
          <span className="font-bold flex justify-center items-center text-cyan-800 dark:text-neutral-200">
          {t("orderCart.View_invoice")} <BoldIcon name="arrow-right-2" size={20} tinted className="text-cyan-800 dark:text-neutral-200 rtl:rotate-180" />
          </span>
        </div>
       
      </div>
    </div>
  );
}
