type DepartmentCardProps = {
  icon: string;
  title: string;
  description: string;
  email: string;
  phone: string;
};

export default function DepartmentCard({ icon, title, description, email, phone }: DepartmentCardProps) {
  return (
    <div className="bg-white rounded-[16px] p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100 hover:shadow-[0_8px_30px_rgb(38,60,111,0.08)] transition-all duration-300 flex flex-col h-full group">
      <div className="w-14 h-14 bg-blue-50 rounded-[12px] flex items-center justify-center text-primary text-2xl mb-6 group-hover:bg-primary group-hover:text-white transition-colors">
        <i className={icon}></i>
      </div>
      <div className="contact-card-title font-display font-bold text-dark mb-3">{title}</div>
      <p className="text-sm text-gray-600 mb-6 flex-grow">{description}</p>
      <div className="pt-4 border-t border-gray-100 mt-auto">
        <a href={`mailto:${email}`} className="flex items-center gap-3 text-sm text-gray-700 hover:text-primary mb-3 transition-colors">
          <i className="far fa-envelope text-primary w-4"></i> {email}
        </a>
        <a href={`tel:${phone.replace(/\s/g, '')}`} className="flex items-center gap-3 text-sm text-gray-700 hover:text-primary transition-colors">
          <i className="fas fa-phone text-primary w-4"></i> {phone}
        </a>
      </div>
    </div>
  );
}