The Website Builder for Developers

import Image from "next/image"
import { Check } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent } from "@/components/ui/card"
import { ImageType } from "@/types"

interface Props {
  badge: string
  title: string
  description: string
  features: { title: string; description: string }[]
  image: ImageType
}

export default function Features({ badge, title, description, features, image }: Props) {
  return (
    <div className="w-full py-20 lg:py-40">
      <div className="container mx-auto">
        <Card className="grid border border-border rounded-lg container py-8 grid-cols-1 gap-8 items-center lg:grid-cols-2">
          <CardContent className="flex flex-col gap-10">
            <div className="flex flex-col gap-4">
              {badge && (
                <div>
                  <Badge variant="outline">{badge}</Badge>
                </div>
              )}

              {title && <h2 className="text-3xl lg:text-5xl tracking-tighter max-w-xl font-semibold">{title}</h2>}

              {description && (
                <p className="text-lg leading-relaxed tracking-tight text-muted-foreground max-w-xl">{description}</p>
              )}
            </div>

            <div className="grid lg:pl-6 grid-cols-1 sm:grid-cols-3 lg:grid-cols-1 gap-6">
              {features.map((feature, index) => (
                <div key={index} className="flex flex-row gap-6 items-start">
                  <Check className="w-6 h-6 mt-2" />
                  <div className="flex flex-col gap-1">
                    <p>{feature.title}</p>
                    <p className="text-muted-foreground text-sm">{feature.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
          <div className="relative bg-muted rounded-md aspect-square overflow-hidden">
            {image && <Image src={image.src} alt={image.alt} fill className="object-cover w-full h-full" />}
          </div>
        </Card>
      </div>
    </div>
  )
}