"use client";

import type { RealWork } from "../types";

interface WorkExperienceProps {
	realWork: RealWork[];
}

export function WorkExperience({ realWork }: WorkExperienceProps) {
	return (
		<section className="w-full max-w-4xl mx-auto px-4 space-y-8">
			<div className="text-center space-y-2">
				<h2 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
					Work Experience
				</h2>
				<p className="text-gray-400 max-w-2xl mx-auto">
					Professional collaborations and product work I have contributed to.
				</p>
			</div>

			{realWork.length === 0 ? (
				<div className="p-6 md:p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-blue-500/5 backdrop-blur-sm border border-cyan-500/20 text-center">
					<p className="text-gray-300">No work experience entries available yet.</p>
				</div>
			) : (
				<div className="space-y-4">
					{realWork.map((entry, index) => (
						<div
							key={`${entry.company}-${index}`}
							className="p-6 md:p-8 rounded-2xl bg-gradient-to-br from-cyan-500/10 to-blue-500/5 backdrop-blur-sm border border-cyan-500/20 space-y-5"
						>
							<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
								<h3 className="text-2xl font-semibold text-white">{entry.company}</h3>
								{entry.url ? (
									<a
										href={entry.url}
										target="_blank"
										rel="noreferrer"
										className="inline-flex items-center gap-2 self-start sm:self-auto rounded-full border border-cyan-400/30 bg-cyan-400/10 px-3 py-1.5 text-sm font-medium text-cyan-200 hover:bg-cyan-400/20 hover:border-cyan-300/50 transition-colors"
									>
										<span>{new URL(entry.url).hostname.replace(/^www\./, "")}</span>
										<svg
											viewBox="0 0 20 20"
											fill="currentColor"
											aria-hidden="true"
											className="h-4 w-4"
										>
											<path d="M5 6.75A1.75 1.75 0 0 1 6.75 5h2a.75.75 0 0 0 0-1.5h-2A3.25 3.25 0 0 0 3.5 6.75v6.5A3.25 3.25 0 0 0 6.75 16.5h6.5a3.25 3.25 0 0 0 3.25-3.25v-2a.75.75 0 0 0-1.5 0v2A1.75 1.75 0 0 1 13.25 15h-6.5A1.75 1.75 0 0 1 5 13.25v-6.5Z" />
											<path d="M11.25 3.5a.75.75 0 0 0 0 1.5h2.69l-4.72 4.72a.75.75 0 1 0 1.06 1.06L15 6.06v2.69a.75.75 0 0 0 1.5 0V3.5h-5.25Z" />
										</svg>
									</a>
								) : null}
							</div>

							<p className="text-gray-300 leading-relaxed">{entry.summary}</p>

							{entry.tags && entry.tags.length > 0 ? (
								<div className="flex flex-wrap gap-2">
									{entry.tags.map((tag) => (
										<span
											key={`${entry.company}-${tag}`}
											className="px-3 py-1 rounded-full text-xs font-semibold bg-cyan-500/20 text-cyan-200 border border-cyan-500/30"
										>
											{tag}
										</span>
									))}
								</div>
							) : null}
						</div>
					))}
				</div>
			)}
		</section>
	);
}
