import { Type, createBlock } from "camox/createBlock";

const testimonial = createBlock({
  id: "testimonial",
  title: "Testimonial",
  description:
    "Display a customer testimonial or user review. Ideal for building trust and social proof.",
  content: {
    quote: Type.String({
      default:
        "This platform has transformed how we build and manage our website. The developer experience is exceptional.",
      title: "Quote",
    }),
    author: Type.String({ default: "Kai Doe", title: "Author" }),
    title: Type.String({ default: "Senior Developer", title: "Title" }),
    company: Type.String({ default: "E Corp", title: "Company" }),
  },
  component: TestimonialComponent,
  toMarkdown: (c) => [`> ${c.quote}`, `— ${c.author}, ${c.title}, ${c.company}`],
});

function TestimonialComponent() {
  return (
    <section className="bg-background py-12 sm:py-16 md:py-24">
      <div className="container mx-auto px-4">
        <div className="mx-auto max-w-4xl text-center">
          <testimonial.Field name="quote">
            {(props) => (
              <blockquote
                {...props}
                className="text-foreground mb-8 text-xl leading-relaxed font-medium sm:text-3xl"
              >
                "{props.children}"
              </blockquote>
            )}
          </testimonial.Field>
          <div className="flex flex-col items-center">
            <testimonial.Field name="author">
              {(props) => (
                <cite {...props} className="text-foreground text-lg font-semibold not-italic" />
              )}
            </testimonial.Field>
            <div className="text-muted-foreground flex flex-col sm:flex-row sm:items-center sm:gap-2">
              <testimonial.Field name="title">{(props) => <span {...props} />}</testimonial.Field>
              <span className="hidden sm:inline">&bull;</span>
              <testimonial.Field name="company">{(props) => <span {...props} />}</testimonial.Field>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export { testimonial as block };