import React, { useState } from ‘react’;
import { Camera, User, Clock, Tag } from ‘lucide-react’;

const Portfolio = () => {
const [selectedCategory, setSelectedCategory] = useState(‘all’);

// Sample portfolio data in Polish
const categories = [
{ id: ‘all’, name: ‘Wszystkie’ },
{ id: ‘portrait’, name: ‘Portrety’ },
{ id: ‘landscape’, name: ‘Krajobrazy’ },
{ id: ‘wedding’, name: ‘Śluby’ },
{ id: ‘commercial’, name: ‘Komercyjne’ }
];

const photos = [
{
id: 1,
category: ‘portrait’,
title: ‘Portret miejski’,
thumbnail: ‘/api/placeholder/400/300’,
date: ‘2024’,
client: ‘Projekt własny’
},
{
id: 2,
category: ‘landscape’,
title: ‘Wschód słońca w górach’,
thumbnail: ‘/api/placeholder/400/300’,
date: ‘2024’,
client: ‘Magazyn Przyrodniczy’
},
{
id: 3,
category: ‘wedding’,
title: ‘Ceremonia na plaży’,
thumbnail: ‘/api/placeholder/400/300’,
date: ‘2024’,
client: ‘Anna i Jan’
},
{
id: 4,
category: ‘commercial’,
title: ‘Sesja produktowa’,
thumbnail: ‘/api/placeholder/400/300’,
date: ‘2024’,
client: ‘Tech Corp’
},
{
id: 5,
category: ‘portrait’,
title: ‘Sesja studyjna’,
thumbnail: ‘/api/placeholder/400/300’,
date: ‘2024’,
client: ‘Agencja Modelek’
},
{
id: 6,
category: ‘landscape’,
title: ‘Nocna panorama miasta’,
thumbnail: ‘/api/placeholder/400/300’,
date: ‘2024’,
client: ‘Biuro Turystyki’
}
];

const filteredPhotos = selectedCategory === ‘all’
? photos
: photos.filter(photo => photo.category === selectedCategory);

const getCategoryName = (categoryId) => {
const category = categories.find(cat => cat.id === categoryId);
return category ? category.name : categoryId;
};

return (

{/* Hero Section */}

Jan Kowalski Fotografia

Uwieczniamy wyjątkowe momenty z każdej perspektywy

  {/* Category Navigation */}
  <div className="flex flex-wrap justify-center gap-4 mb-12">
    {categories.map(category => (
      <button
        key={category.id}
        onClick={() => setSelectedCategory(category.id)}
        className={`px-6 py-2 rounded-full transition-colors ${
          selectedCategory === category.id
            ? 'bg-black text-white'
            : 'bg-gray-100 hover:bg-gray-200'
        }`}
      >
        {category.name}
      </button>
    ))}
  </div>

  {/* Photo Grid */}
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    {filteredPhotos.map(photo => (
      <div key={photo.id} className="group relative">
        {/* Image */}
        <div className="aspect-w-4 aspect-h-3 overflow-hidden rounded-lg bg-gray-100">
          <img
            src={photo.thumbnail}
            alt={photo.title}
            className="w-full h-full object-cover transition-transform group-hover:scale-105"
          />
          {/* Overlay */}
          <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-60 transition-opacity flex items-center justify-center opacity-0 group-hover:opacity-100">
            <div className="text-white text-center p-4">
              <h3 className="text-xl font-bold mb-2">{photo.title}</h3>
              <div className="flex items-center justify-center gap-4">
                <span className="flex items-center gap-1">
                  <User size={16} />
                  {photo.client}
                </span>
                <span className="flex items-center gap-1">
                  <Clock size={16} />
                  {photo.date} r.
                </span>
                <span className="flex items-center gap-1">
                  <Tag size={16} />
                  {getCategoryName(photo.category)}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    ))}
  </div>
</div>

);
};

export default Portfolio;