import React from "react";
import { PiCalendarDots } from "react-icons/pi";

interface Props {
    date: number;
}

export default function StartedOn({ date }: Props) {
    const formattedDate = new Date(date);

    const yearMonthDay = formattedDate.toISOString().split("T")[0];

    const fullDateTime = formattedDate.toLocaleString("en-US", {
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false,
    });

    return (
        <div className="flex items-center space-x-3">
            <div className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-lg border border-gray-300">
                <PiCalendarDots className="text-mti-purple-dark size-7" />
            </div>
            <div>
                <p className="pb-1 text-sm font-medium text-gray-800">Started on</p>
                <div className="flex items-center">
                    <p
                        className="text-xs font-medium text-gray-800"
                        title={fullDateTime}
                    >
                        {yearMonthDay}
                    </p>
                </div>
            </div>
        </div>
    );
};