import { Calendar2, Cup } from "iconsax-react"
import ProgressCircle from "./progress-circle"
import { AwardsResponse } from "../../types"
import { FC } from "react"
import { formatDateToPersian } from "../../utility/getDate"

type Props = {
    award: AwardsResponse
}

export const AwardNotComplete: FC<Props> = ({ award }) => {
    return (
        <div className="w-full flex flex-col lg:items-center gap-5 bg-auth-form rounded-[40px] h-full relative p-[18px]">
            <div className="flex flex-row items-center justify-between w-full">
                <div className="flex flex-row gap-x-[6px] items-center">
                    <p className="font-normal text-lg text-primary-text-color">{award?.score}</p>
                    <Cup className="size-4" color="#11212D" />
                </div>
                <ProgressCircle percentage={75} />
            </div>
            <div className="flex flex-col items-start gap-3">
                <p className="font-normal text-base text-primary-text-color" style={{ fontFamily: "vazirmatn" }}>{award?.desc?.length >= 70 ? `${award?.desc?.slice(0, 70)} ...` : award?.desc}</p>
                <div className="flex flex-row items-center gap-2">
                    <p className="font-normal text-sm text-secondary-text-color">{formatDateToPersian(award?.expireDate, "jYYYY/jMM/jD")}</p>
                    <Calendar2 color="#777577" className="size-5" />
                </div>
            </div>
        </div>
    )
}