"use client"

import dayjs from "dayjs"
import { find } from "lodash"
import { Button, Space } from "antd"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faTrash, faPenToSquare } from "@fortawesome/free-solid-svg-icons"
import { useRouter } from "@/i18n/routing"

type IProps = {
  type?: string
  title?: string
  start?: string
  end?: string
  description?: string
  color?: string
  id?: string
  confirmDelete: (id: number) => void
}

export const ScheduleItem = ({ type, title, start, end, description, color, id, confirmDelete }: IProps) => {
  const router = useRouter()

  const startDate = start ? dayjs(start).format("hh:mm A") : "--"
  const endDate = end ? dayjs(end).format("hh:mm A") : "--"

  return (
    <div
      className={`flex justify-between items-start gap-2 p-4 rounded-lg mb-3 border-[1px] border-solid border-[var(--secondary-30)] bg-[var(--secondary-10)] text-left`}
      style={{ borderLeft: `6px solid ${color}` }}>
      <div className="flex flex-col items-start">
        <h3 className="text-base font-semibold leading-[25px] mb-1">
          <span style={{ color }}>{type}:</span> {title}
        </h3>
        <p className="text-base text-[var(--secondary-100)] mb-1">{`${startDate} - ${endDate}`}</p>
        <p className="text-sm text-[var(--secondary-60)]">{description}</p>
      </div>
      <div className="flex gap-2">
        <Space>
          <Button
            onClick={() => {
              router.push(`/calendar/${id}`)
            }}
            type="default"
            icon={
              <FontAwesomeIcon
                icon={faPenToSquare}
                className="text-[#3498db]"
              />
            }
            className="hover:border-[var(--primary--70)]"></Button>
          <Button
            onClick={() => {
              confirmDelete(Number(id))
            }}
            icon={
              <FontAwesomeIcon
                icon={faTrash}
                className="text-[#e8262d]"
              />
            }
            type="default"
            className="hover:border-[var(--primary--70)]"></Button>
        </Space>
      </div>
    </div>
  )
}