import { ArrowUpRight } from "@phosphor-icons/react/ssr";
import type { Widget } from "@/lib/config/schema";
import { PN_CARD_CLASS } from "@/components/widgets/WidgetCard";

type BookmarkWidget = Extract<Widget, { type: "bookmark" }>;

export function BookmarkWidget({ widget }: { widget: BookmarkWidget }) {
  return (
    <a
      href={widget.href}
      target="_blank"
      rel="noreferrer"
      className={`${PN_CARD_CLASS} text-inherit no-underline`}
      style={{ gridColumn: "span 3" }}
    >
      <div className="flex items-center gap-2">
        <span className="flex-1 text-[15px] font-medium text-fg">{widget.name}</span>
        <ArrowUpRight size={16} className="text-accent" aria-hidden />
      </div>
      {widget.description && <span className="text-xs text-fg-muted">{widget.description}</span>}
    </a>
  );
}