'use client';

import Link from 'next/link';

export const EmptyGalleryState = () => {
  return (
    <div className="flex flex-col items-center justify-center py-16 px-6">
      <div className="w-24 h-24 mb-6 rounded-full bg-slate-800 flex items-center justify-center">
        <svg
          className="w-12 h-12 text-gray-500"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
          />
        </svg>
      </div>

      <h3 className="text-xl md:text-2xl font-bold text-white mb-3 text-center">
        No Generated Images Yet
      </h3>

      <p className="text-gray-400 text-center mb-8 max-w-md">
        Your generated images will appear here. Start creating AI-powered images using the text-to-image tool.
      </p>

      <Link
        href="/demo/tti"
        className="inline-block px-8 py-4 rounded-xl bg-gradient-to-r from-amber-600 to-orange-600 text-white font-semibold hover:from-amber-500 hover:to-orange-500 transition-all shadow-lg shadow-amber-900/30 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-slate-950 min-h-[44px]"
      >
        Generate Images
      </Link>
    </div>
  );
};