"use client";

import { useEffect } from "react";

export function InstagramFeed() {
  useEffect(() => {
    // Load LightWidget script for Instagram feed
    const script = document.createElement('script');
    script.src = 'https://cdn.lightwidget.com/widgets/lightwidget.js';
    script.async = true;
    document.body.appendChild(script);

    return () => {
      // Cleanup script on unmount
      if (document.body.contains(script)) {
        document.body.removeChild(script);
      }
    };
  }, []);

  return (
    <div className="mb-8">
      <p className="mb-4 text-base sm:text-lg">
        <strong>Latest from our studio:</strong>
      </p>
      
      {/* Instagram Feed Grid - Posts Only */}
      <div className="mb-4">
        {/* @ts-ignore - allowTransparency is valid for iframe */}
        <iframe 
          src="https://cdn.lightwidget.com/widgets/dfd875efe9b05e47b5ff190cc0a71990.html" 
          scrolling="no" 
          allowTransparency={true}
          className="lightwidget-widget" 
          style={{
            width: '100%',
            height: '200px',
            border: 'none',
            overflow: 'hidden'
          }}
        />
      </div>
    </div>
  );
}