"use client";

import { Course } from "@/types/types";
import { IMAGE_BASE_URL } from "@/components/main/BaseUrl";
import { formatCoursePriceLabel } from "@/lib/formatCoursePriceLabel";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import { useTranslation } from "react-i18next";

function AcademyPackageItem({
  course,
}: {
  course: Course;
}) {
  const { i18n } = useTranslation("common");
  const priceLang = i18n.language === "en" ? "en" : "fa";
  const imageSrc = course.course_image
    ? `${IMAGE_BASE_URL}${course.course_image}`
    : "/images/default-course.jpg";

  return (
    <Link
      href={`/academy/${course._id}/${encodeURIComponent(course.cuorse_name || "course")}`}
      className="mb-4 p-4 border rounded-3xl border-border-primary-light w-full block font-semibold"
    >
      <div className="flex w-full items-center justify-between max-[350px]:flex-col max-sm:gap-5">
        <div className="flex items-center gap-3 min-w-0 flex-1">
          <div className="relative h-12 w-12 shrink-0 overflow-hidden rounded-xl shadow-md">
            <Image
              src={imageSrc}
              alt={course.cuorse_name}
              fill
              className="object-cover"
            />
          </div>
          <div className="min-w-0">
            <p className="font-bold truncate">{course.cuorse_name}</p>
            <p className="text-xs text-gray-500 dark:text-gray-400 line-clamp-2 mt-1">
              {course.caption}
            </p>
          </div>
        </div>
        <div className="w-full h-[1px] max-[350px]:flex hidden dark:bg-white/30 bg-black/30" />
        <div className="flex max-[350px]:flex-row max-[350px]:w-full max-[350px]:justify-between max-[350px]:items-center flex-col items-end max-sm:text-[11px] max-sm:items-center shrink-0">
          <span className="text-sm">{course.teacher_name}</span>
          <div className="flex items-center gap-1 mt-3 max-[350px]:mt-0">
            <span
              className={
                course.is_free ? "text-[#008D0E]" : "text-[#3A59A9]"
              }
            >
              {formatCoursePriceLabel(course, priceLang)}
            </span>
          </div>
        </div>
      </div>
    </Link>
  );
}

export default AcademyPackageItem;
