import { Card, CardContent } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import Image from 'next/image'

const articles = [
  {
    id: 1,
    image: '/images/yacht.jpg',
    tags: ['Полезное', 'Интересное'],
    title: 'Тема публикации',
    description: 'Текст публикации'
  },
  {
    id: 2,
    image: '/images/yacht.jpg',
    tags: ['Полезное', 'Интересное'],
    title: 'В чем отличия яхты, катера и лодки?',
    description: 'Гайд по выбору судна для морской прогулки. Что арендовать в Балаклаве',
    hasButton: true
  },
  {
    id: 3,
    image: '/images/yacht.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 font-bold mb-8 text-left">Полезные статьи</h2>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {articles.map((article) => (
          <Card key={article.id} className="overflow-hidden">
            <div className="relative">
              <Image 
                src={article.image} 
                alt={article.title} 
                width={400} 
                height={200} 
                className="w-full h-48 object-cover"
              />
            </div>
            <CardContent className="p-6">
              <div className="flex gap-2 mb-3">
                {article.tags.map((tag, idx) => (
                  <span 
                    key={idx}
                    className="px-2 py-1 text-xs border border-gray-300 rounded text-gray-700"
                  >
                    {typeof tag === 'string' ? tag : tag.text}
                  </span>
                ))}
              </div>
              <h3 className="text-lg font-bold text-gray-800 mb-2">
                {article.title}
              </h3>
              <p className="text-sm text-gray-600 mb-4">
                {article.description}
              </p>
              {article.hasButton && (
                <div className="flex justify-center">
                  <Button 
                    variant="outline" 
                    className="border border-gray-300 text-gray-700 hover:bg-gray-50"
                  >
                    Читать больше
                  </Button>
                </div>
              )}
            </CardContent>
          </Card>
        ))}
      </div>
    </section>
  )
}