import { Card, CardContent } from '@/components/ui/card';
import { Star } from 'lucide-react';
 
export default function TestimonialSection() {
    return (
        <section className="py-16 lg:py-32">
            <div className="mx-auto w-full max-w-2xl px-6 lg:max-w-7xl">
                <Card className="relative overflow-hidden">
                    <CardContent>
                        <div className="ml-auto sm:p-6 lg:w-8/12 lg:p-12">
                            <div className="flex gap-2">
                                {[...Array(5)].map((_, i) => (
                                    <Star key={i} className="size-4 fill-amber-400 text-amber-400 sm:size-5" />
                                ))}
                            </div>
                            <p className="mt-4 text-lg font-semibold sm:text-xl md:text-2xl lg:mt-6 lg:text-3xl/snug">
                                Blookie has revolutionized my workflow. The amazing design blocks are a game changer.
                            </p>
                            <div className="mt-8 flex items-center gap-4">
                                <img
                                    src="https://images.unsplash.com/flagged/photo-1578001357456-13f18a857b57?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                    className="size-10 rounded-full object-cover object-center lg:absolute lg:inset-y-0 lg:left-0 lg:h-full lg:w-4/12 lg:rounded-none"
                                />
                                <div className="flex flex-col gap-0.5 lg:gap-1.5">
                                    <span className="text-sm font-semibold lg:text-base">Darla Craig</span>
                                    <span className="text-muted-foreground text-xs">Software Engineer</span>
                                </div>
                            </div>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </section>
    );
}