'use client';

import { motion } from 'framer-motion';
import { Phone, Mail, MapPin } from 'lucide-react';

interface ContactSectionProps {
	title: string;
	phone?: string;
	email?: string;
	address?: string;
}

const ContactSection = ({
	title,
	phone,
	email,
	address,
}: ContactSectionProps) => {
	const contactItems = [
		{
			icon: Phone,
			label: 'Phone',
			value: phone,
			link: phone ? `tel:${phone}` : '#',
		},
		{
			icon: Mail,
			label: 'Email',
			value: email,
			link: email ? `mailto:${email}` : '#',
		},
		{ icon: MapPin, label: 'Address', value: address, link: '#' },
	];

	return (
		<section className="py-16 md:py-10 px-4 md:px-12">
			<div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-4">
				{contactItems.map((item) => {
					const Icon = item.icon;
					return (
						<motion.a
							key={item.label}
							href={item.link}
							className="glass-card p-4 md:p-6 flex items-center gap-4 group hover:border-primary/50 transition-all duration-300"
							whileHover={{ x: 6 }}
						>
							{/* Icon */}
							<div className="w-10 h-10 md:w-12 md:h-12 rounded-lg bg-primary/20 flex items-center justify-center group-hover:bg-primary/40 transition-colors duration-300 flex-shrink-0">
								<Icon className="w-5 h-5 md:w-6 md:h-6 text-primary" />
							</div>

							{/* Text */}
							<div className="flex flex-col">
								<p className="text-xs md:text-sm text-muted-foreground uppercase tracking-wide mb-0.5">
									{item.label}
								</p>
								<p className="font-semibold text-foreground group-hover:text-primary transition-colors duration-300">
									{item.value}
								</p>
							</div>
						</motion.a>
					);
				})}
			</div>
		</section>
	);
};

export default ContactSection;