'use client';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { TechIcons } from '@/components/icons/TechIcons';
import { PortfolioProject } from '@/src/types/project';
import { CiImageOff } from 'react-icons/ci';
import Image from 'next/image';
import { FaGithub, FaExternalLinkAlt } from 'react-icons/fa';
import { X } from 'lucide-react';

interface ProjectApprovalViewProps {
  project: PortfolioProject;
  onClose: () => void;
}

export function ProjectApprovalView({ project, onClose }: ProjectApprovalViewProps) {
  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[500]">
      <Card className="w-full max-w-4xl max-h-[90vh] overflow-y-auto bg-neutral-100">
        <div className="p-6 space-y-6">
          <div className="flex justify-between items-start">
            <div>
              <h2 className="text-2xl font-bold text-neutral-900">{project.title}</h2>
            </div>
            <Button variant="ghost" onClick={onClose}>
              <X size={24} />
            </Button>
          </div>

          <div className="aspect-video relative rounded-lg overflow-hidden">
            {project.image ? (
              <Image
                src={project.image}
                alt={project.title}
                fill
                className="object-cover"
              />
            ) : (
              <div className="w-full h-full bg-neutral-700 flex items-center justify-center">
                <CiImageOff size={60} className="text-neutral-500" />
              </div>
            )}
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-4">
              <div>
                <h3 className="text-lg font-semibold text-neutral-900 mb-2">Description</h3>
                <p className="text-neutral-700">{project.description}</p>
              </div>

              <div>
                <h3 className="text-lg font-semibold text-neutral-900 mb-2">Technologies</h3>
                <div className="flex flex-wrap gap-2">
                  {project.technologies.map((technology) => (
                    <div key={technology} className="flex items-center gap-1 bg-neutral-200 px-3 py-1 rounded-full w-fit">
                      {TechIcons[technology]}
                      <span className="text-sm text-neutral-800 whitespace-nowrap">{technology}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="space-y-4">
              <div>
                <h3 className="text-lg font-semibold text-neutral-900 mb-2">Links</h3>
                <div className="space-y-2">
                  {project.url && (
                    <a
                      href={project.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center gap-2 text-neutral-700 hover:text-neutral-900"
                    >
                      <FaExternalLinkAlt />
                      <span>Live Demo</span>
                    </a>
                  )}
                  {project.gitUrl && (
                    <a
                      href={project.gitUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center gap-2 text-neutral-700 hover:text-neutral-900"
                    >
                      <FaGithub />
                      <span>GitHub Repository</span>
                    </a>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}