import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import Image from "next/image";

const articles = [
    {
        id: 1,
        image: "/images/articles/article1.jpg",
        tags: ["Полезное", "Интересное"],
        title: "Вейксерф в Балаклаве – испытай новые ощущения с сёрф-клубом «Рурайдер»!",
        description: "В последние годы вейксерф стал настоящим хитом среди любителей активного отдыха и адреналина.",
    },
    {
        id: 2,
        image: "/images/articles/article2.jpg",
        tags: ["Полезное", "Интересное"],
        title: "В чем отличия яхты, катера и лодки?",
        description:
            "Гайд по выбору судна для морской прогулки. Что арендовать в Балаклаве",
    },
    {
        id: 3,
        image: "/images/articles/article3.jpg",
        tags: [
            { text: "Дзен", icon: "D" },
            { text: "VK", icon: "VK" },
        ],
        title: "Подпишись на наши группы в социальных сетях",
        description:
            "Чтобы не пропустить новый контент. Открой новое в мире морских прогулок",
    },
];

export default function Articles() {
    return (
        <section className="container max-w-6xl mx-auto px-4 py-12">
            <h2 className="text-3xl md:text-4xl font-bold mb-8 text-left">
                Полезные статьи
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
                {articles.map((article) => (
                    <div key={article.id} className="space-y-4">
                        <Card className="overflow-hidden rounded-[24px]">
                            <div className="relative">
                                <Image
                                    src={article.image}
                                    alt={article.title}
                                    width={400}
                                    height={200}
                                    className="w-full h-48 object-cover"
                                />
                            </div>
                        </Card>
                        <div className="space-y-3">
                            <div className="flex gap-2">
                                {article.tags.map((tag, idx) => (
                                    <span
                                        key={idx}
                                        className="px-3 py-2 text-xs border border-gray-300 rounded-[8px] text-gray-700 font-bold"
                                    >
                                        {typeof tag === "string"
                                            ? tag
                                            : tag.text}
                                    </span>
                                ))}
                            </div>
                            <h3 className="text-lg font-bold text-gray-800">
                                {article.title}
                            </h3>
                            <p className="text-sm text-gray-600">
                                {article.description}
                            </p>
                        </div>
                    </div>
                ))}
            </div>
            <div className="text-center">
                <Button
                    size="lg"
                    className="bg-white text-gray-900 hover:bg-gray-100 px-8 py-3 h-[56px] w-[336px] text-lg font-bold"
                >
                    Читать больше
                </Button>
            </div>
        </section>
    );
}
