import { motion } from 'framer-motion';
import { PaperAirplaneIcon } from '@heroicons/react/24/outline';
import { Leader } from './types';

interface LeaderCardProps {
  leader: Leader;
  isSelected: boolean;
  onSelect: () => void;
}

export default function LeaderCard({ leader, isSelected, onSelect }: LeaderCardProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      whileHover={{ scale: 1.005 }}
      transition={{ duration: 0.2 }}
      className={`
        bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100
        ${isSelected
          ? 'ring-2 ring-[#00308F]'
          : 'hover:shadow-lg hover:border-blue-100'
        }
      `}
    >
      <div className="flex flex-col sm:flex-row">
        {/* Image Container */}
        <div className="sm:w-48 h-64 sm:h-auto flex-shrink-0">
          <img
            src={leader.imageUrl}
            alt={leader.name}
            className="w-full h-full object-cover"
          />
        </div>

        {/* Content Container */}
        <div className="flex-1 p-6">
          <div className="flex flex-col h-full">
            <div className="mb-4">
              <div className="flex items-center justify-between mb-3">
                <h3 className="text-xl font-semibold text-gray-900">
                  {leader.name}
                </h3>
                <span className="px-3 py-1 text-sm font-medium bg-blue-50 text-[#00308F] rounded-full">
                  {leader.rank}
                </span>
              </div>
              <p className="text-gray-600 mb-4">{leader.division}</p>

              {/* Contact Information */}
              <div className="space-y-2 text-sm text-gray-600">
                <p className="flex items-center">
                  <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
                      d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                  {leader.email}
                </p>
                <p className="flex items-center">
                  <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
                      d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                  </svg>
                  {leader.phone}
                </p>
                <p className="flex items-center">
                  <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
                      d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                  </svg>
                  {leader.office}
                </p>
              </div>
            </div>

            <button
              onClick={onSelect}
              className="mt-auto w-full sm:w-auto flex items-center justify-center gap-2 
                bg-[#00308F] text-white py-3 px-6 rounded-lg
                hover:bg-[#002070] transition-all duration-300
                focus:outline-none focus:ring-2 focus:ring-[#00308F] focus:ring-opacity-50
                transform hover:-translate-y-0.5"
            >
              <PaperAirplaneIcon className="w-5 h-5" />
              Compose Letter
            </button>
          </div>
        </div>
      </div>
    </motion.div>
  );
}