import Link from "next/link";
import { Project } from "@/lib/types";
import Chip from "@/components/chip";
import { Eye } from "lucide-react";

const CommercialProjectCard = ({ project }: { project: Project }) => {
  return (
    <div className="flex flex-col justify-between p-6 text-white transition-all duration-300 bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl hover:bg-white/10 hover:border-white/20 w-[22rem] md:w-[28rem] shrink-0 snap-center shadow-xl group">
      <div>
        <div className="flex items-center justify-between mb-4">
          <h4 className="text-2xl font-bold text-yellow-400 group-hover:text-yellow-300 transition-colors">
            {project.name}
          </h4>
          {project.commercial && (
            <span className="px-2 py-1 text-xs font-bold text-black bg-yellow-400 rounded-full">
              COMMERCIAL
            </span>
          )}
        </div>
        <p className="mb-6 text-gray-200 leading-relaxed">
          {project.short_description}
        </p>
        <div className="flex flex-wrap gap-2 mb-8">
          {project.technologies.slice(0, 4).map((tech) => (
            <Chip key={tech} text={tech} />
          ))}
          {project.technologies.length > 4 && (
            <span className="text-xs text-white/50 self-center">
              +{project.technologies.length - 4} more
            </span>
          )}
        </div>
      </div>

      <div className="flex gap-3 mt-auto">
        <Link
          href={`/projects/${project.name}`}
          className="flex-1 px-4 py-3 text-center font-bold text-black bg-yellow-400 rounded-xl hover:bg-yellow-500 transition-colors glass-effect glossy-effect bottom gloss-highlight"
        >
          Read more
        </Link>
        {project.visit_url && (
          <a
            href={project.visit_url}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center justify-center px-4 py-3 font-bold text-white border border-white/20 rounded-xl hover:bg-white/10 transition-colors backdrop-blur-md"
            title="Visit Live Site"
          >
            <Eye size={20} />
          </a>
        )}
      </div>
    </div>
  );
};

export default CommercialProjectCard;