import { Button } from "@/components/button";
import { Card } from "@/components/card";
import { Reveal } from "@/components/reveal";

type EmptyStateProps = {
  title: string;
  description: string;
};

export function EmptyState({ title, description }: EmptyStateProps) {
  return (
    <Card className="text-center">
      <h3 className="text-xl font-semibold text-slate-950">{title}</h3>
      <p className="mx-auto mt-3 max-w-xl text-sm leading-6 text-slate-600">{description}</p>
    </Card>
  );
}

type ErrorStateProps = {
  title?: string;
  message: string;
};

export function ErrorState({ title = "Podaci trenutno nisu dostupni", message }: ErrorStateProps) {
  return (
    <Card className="border-red-100 bg-red-50 text-center shadow-none">
      <h3 className="text-xl font-semibold text-red-950">{title}</h3>
      <p className="mx-auto mt-3 max-w-xl text-sm leading-6 text-red-700">{message}</p>
      <Button href="/kontakt" variant="outline" className="mt-5">
        Zakažite konsultaciju
      </Button>
    </Card>
  );
}

type SectionHeadingProps = {
  eyebrow?: string;
  title: string;
  description?: string;
  tone?: "light" | "dark";
};

export function SectionHeading({ eyebrow, title, description, tone = "light" }: SectionHeadingProps) {
  const isDark = tone === "dark";

  return (
    <Reveal className="max-w-3xl">
      {eyebrow ? <p className="text-xs font-semibold uppercase tracking-[0.16em] text-primary">{eyebrow}</p> : null}
      <h2 className={isDark ? "mt-4 text-3xl font-semibold leading-[1.08] text-white sm:text-4xl lg:text-[2.65rem]" : "mt-4 text-3xl font-semibold leading-[1.08] text-slate-950 sm:text-4xl lg:text-[2.65rem]"}>{title}</h2>
      {description ? (
        <p className={isDark ? "mt-5 max-w-2xl text-base leading-7 text-slate-300" : "mt-5 max-w-2xl text-base leading-7 text-slate-600"}>
          {description}
        </p>
      ) : null}
    </Reveal>
  );
}

type RichTextProps = {
  content: string | null;
  fallback?: string;
};

export function RichText({ content }: RichTextProps) {
  if (!content) {
    return null;
  }

  return (
    <div
      className="space-y-5 text-base leading-8 text-slate-700 [&_a]:font-semibold [&_a]:text-primary [&_blockquote]:rounded-2xl [&_blockquote]:border-l-4 [&_blockquote]:border-primary [&_blockquote]:bg-primary-50/70 [&_blockquote]:p-5 [&_blockquote]:font-medium [&_blockquote]:text-slate-800 [&_h2]:pt-7 [&_h2]:font-heading [&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:leading-tight [&_h2]:text-slate-950 [&_h3]:pt-4 [&_h3]:font-heading [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:text-slate-950 [&_li]:pl-1 [&_strong]:font-semibold [&_strong]:text-slate-950 [&_ul]:list-disc [&_ul]:space-y-2 [&_ul]:pl-5"
      dangerouslySetInnerHTML={{ __html: content }}
    />
  );
}
