import type { PortableTextReactComponents } from "@portabletext/react";
import { Quote } from "lucide-react";

const customPortableComponents: Partial<PortableTextReactComponents> = {
  block: {
    blockquote: ({ children }: { children?: React.ReactNode }) => (
      <blockquote className="flex w-fit max-w-9/10 mx-auto bg-gray-200 p-7 non-italic font-semibold my-12 rounded-lg">
        <Quote className="text-red-800 mr-2" />
        <div className="m-6">
          {children}
        </div>
      </blockquote>
    ),
  },
  listItem: {
    bullet: ({ children }: { children?: React.ReactNode }) => (
      <li className="indent-8">{children}</li>
    ),
  },
  list: {
    bullet: ({ children }: { children?: React.ReactNode }) => (
      <ul className="list-disc list-inside mt-4 mb-8">{children}</ul>
    ),
    number: ({ children }: { children?: React.ReactNode }) => (
      <ol className="list-decimal list-inside mt-4 mb-8">{children}</ol>
    ),
  },
  types: {
    image: ({ value }: { value: { asset: { url: string }; alt?: string } }) => (
      <img src={value.asset.url} alt={value.alt || ""} />
    ),
  },
  marks: {
    link: ({
      children,
      value,
    }: {
      children?: React.ReactNode;
      value?: { href?: string };
    }) => (
      <a href={value?.href ?? "#"} target="_blank" rel="noopener noreferrer">
        {children}
      </a>
    ),
  },
};

export { customPortableComponents as components };
