'use client';
import { InstagramPost, fetchInstagramPosts } from '@/lib/instagram';
import { useEffect, useState } from 'react';

export function InstagramFeed() {
  const [posts, setPosts] = useState<InstagramPost[]>([]);

  useEffect(() => {
    async function getInstagramData() {
      const data = await fetchInstagramPosts();
      setPosts(data);
    }

    getInstagramData();
  }, []);

  return (
    <div className='grid grid-cols-1 md:grid-cols-5 gap-8'>
      {posts.map((post) => (
        <div key={post.id} className='flex flex-col items-center'>
          <a href={post.permalink} target='_blank' rel='noopener noreferrer'>
            <img
              src={post.media_url}
              alt={post.caption}
              className='rounded-lg shadow-lg'
            />
          </a>
        </div>
      ))}
    </div>
  );
}