import { useState } from "react";
import { ArrowLeft, ArrowRight } from "lucide-react";
import { Typography } from "@/components/Typography";

export type TestimonialsProps = {
  tagline: string;
  heading: string;
  items: Array<{
    quote: string;
    author: string;
    role: string;
    avatar?: string;
  }>;
};

export function Testimonials({ tagline, heading, items }: TestimonialsProps) {
  const [i, setI] = useState(0);
  const total = items.length;
  const item = items[i];

  return (
    <section className="bg-muted/40 py-20 md:py-28">
      <div className="container mx-auto max-w-4xl px-6 text-center">
        {tagline ? (
          <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
            {tagline}
          </p>
        ) : null}
        {heading ? <Typography variant="h2">{heading}</Typography> : null}

        {item ? (
          <div className="relative mt-12">
            {total > 1 ? (
              <button
                onClick={() => setI((p) => (p - 1 + total) % total)}
                className="absolute left-0 top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full border h-10 w-10 hover:bg-background md:inline-flex"
                aria-label="Previous"
              >
                <ArrowLeft size={16} />
              </button>
            ) : null}

            <figure className="mx-auto flex max-w-2xl flex-col items-center px-12 md:px-16">
              <blockquote
                className="text-balance text-foreground"
                style={{ fontSize: "clamp(1.25rem, 2.4vw, 1.75rem)", lineHeight: 1.4 }}
              >
                {item.quote}
              </blockquote>
              <figcaption className="mt-8 flex items-center gap-3">
                {item.avatar ? (
                  <img
                    src={item.avatar}
                    alt={item.author}
                    className="h-10 w-10 rounded-full object-cover"
                  />
                ) : null}
                <div className="text-left">
                  <p className="text-sm font-medium">{item.author}</p>
                  {item.role ? (
                    <p className="text-xs text-muted-foreground">{item.role}</p>
                  ) : null}
                </div>
              </figcaption>
            </figure>

            {total > 1 ? (
              <button
                onClick={() => setI((p) => (p + 1) % total)}
                className="absolute right-0 top-1/2 hidden -translate-y-1/2 items-center justify-center rounded-full border h-10 w-10 hover:bg-background md:inline-flex"
                aria-label="Next"
              >
                <ArrowRight size={16} />
              </button>
            ) : null}

            {total > 1 ? (
              <div className="mt-8 flex items-center justify-center gap-3 md:hidden">
                <button
                  onClick={() => setI((p) => (p - 1 + total) % total)}
                  className="inline-flex h-10 w-10 items-center justify-center rounded-full border hover:bg-background"
                  aria-label="Previous"
                >
                  <ArrowLeft size={16} />
                </button>
                <button
                  onClick={() => setI((p) => (p + 1) % total)}
                  className="inline-flex h-10 w-10 items-center justify-center rounded-full border hover:bg-background"
                  aria-label="Next"
                >
                  <ArrowRight size={16} />
                </button>
              </div>
            ) : null}
          </div>
        ) : null}
      </div>
    </section>
  );
}