import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentContainer } from "@/components/ui/component-container"
import { TestimonialCard } from "@/components/blocks/testimonial-card-block"

export function TestimonialCardSection() {
  return (
    <div className="space-y-6">
      <SectionHeading
        title="Testimonial Card"
        description="A card component for displaying customer testimonials with quotes and attribution."
      />

      <ComponentContainer className="grid grid-cols-1 md:grid-cols-2 gap-4" title="">
        <TestimonialCard
          quote="This product has completely transformed how we work. The interface is intuitive and the features are exactly what we needed."
          name="Sarah Johnson"
          role="Product Manager"
          avatarSrc="/avatar-woman-1.png"
        />
        <TestimonialCard
          quote="I've tried many similar tools, but this one stands out for its reliability and thoughtful design. It's become essential to our workflow."
          name="Michael Chen"
          role="Lead Developer"
          avatarSrc="/avatar-man-1.png"
        />
        <TestimonialCard
          quote="The customer support is exceptional. Any time we've had questions, the team has been quick to respond and incredibly helpful."
          name="Emily Rodriguez"
          role="Operations Director"
          avatarSrc="/avatar-woman-2.png"
        />
        <TestimonialCard
          quote="We've seen a 40% increase in productivity since implementing this solution. The ROI has been incredible."
          name="David Wilson"
          role="CEO"
          avatarSrc="/avatar-man-2.png"
        />
      </ComponentContainer>
    </div>
  )
}