import React from "react"
import { ParsedLink } from "./LinkUploader"
// import useStore from "../utils/store"
import { SVGS } from "../assets/svgs"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

interface SourceProps {
  source: ParsedLink
}

// const formatDuration = (sec: number) => {
//   const m = Math.floor(sec / 60)
//   const s = sec % 60
//   return `${m}:${s.toString().padStart(2, "0")}`
// }

const Source: React.FC<SourceProps> = ({ source }) => {
  // const setFormState = useStore((state) => state.setFormState)
  // const formState = useStore((state) => state.formState)

  const {
    url,
    title,
    // author,
    thumbnail,
    // duration,
    // description,
    // transcript,
    // text,
  } = source

  return (
    <div className="relative max-w-xs bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
      <div className="p-4 flex flex-col space-y-2">
        <button
          className="absolute top-2 right-2"
          // onClick={() => {
          //   setFormState({
          //     sources: formState.sources.filter((s) => s !== source),
          //   })
          // }}
        >
          {SVGS.redClose}
        </button>
        <div className="flex items-center gap-2 justify-start">
          {thumbnail && (
            <img
              src={thumbnail}
              alt={title || url}
              className="w-10 h-10 object-cover"
            />
          )}
          {title && (
            <Tooltip>
              <TooltipTrigger asChild>
                <span className="text-sm font-semibold text-left text-gray-800 ">
                  {title}
                </span>
              </TooltipTrigger>
              <TooltipContent>
                <p>{title}</p>
              </TooltipContent>
            </Tooltip>
          )}
        </div>
      </div>
    </div>
  )
}

export default Source
