import { Building2, CheckCircle, ExternalLink, Mail, MapPin, Phone } from 'lucide-react';
import type { CommunityOrganization } from '@/shared/types/community';

interface CommunityOrganizationDetailsProps {
  readonly organization: CommunityOrganization;
  readonly saved: boolean;
  readonly onToggleSaved: () => void;
}

export function CommunityOrganizationDetails({
  organization,
  saved,
  onToggleSaved,
}: CommunityOrganizationDetailsProps) {
  return (
    <div className="px-5 pb-5 space-y-4 border-t border-slate-700/40 pt-4">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="bg-slate-700/30 rounded-xl p-4 space-y-3">
          <h4 className="font-semibold text-sm text-white flex items-center gap-2">
            <Building2 size={14} className="text-green-400" /> Contact Information
          </h4>
          <div className="space-y-2">
            <div className="flex items-center gap-2 text-sm text-slate-300">
              <MapPin size={14} className="text-slate-500 flex-shrink-0" />
              <span>{organization.address}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-slate-300">
              <Phone size={14} className="text-slate-500 flex-shrink-0" />
              <span>{organization.phone}</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-slate-300">
              <Mail size={14} className="text-slate-500 flex-shrink-0" />
              <a href={`mailto:${organization.email}`} className="text-green-400 hover:text-green-300">{organization.email}</a>
            </div>
            <div className="flex items-center gap-2 text-sm text-slate-300">
              <ExternalLink size={14} className="text-slate-500 flex-shrink-0" />
              <a href={`https://${organization.website}`} target="_blank" rel="noopener noreferrer" className="text-green-400 hover:text-green-300">{organization.website}</a>
            </div>
          </div>
        </div>

        <div className="bg-slate-700/30 rounded-xl p-4">
          <h4 className="font-semibold text-sm text-white flex items-center gap-2 mb-3">
            <CheckCircle size={14} className="text-emerald-400" /> Available Opportunities
          </h4>
          <div className="space-y-2">
            {organization.opportunities.map((opportunity) => (
              <div key={opportunity} className="flex items-center gap-2">
                <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0" />
                <span className="text-sm text-slate-300">{opportunity}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 pt-2">
        <div className="flex items-center gap-2">
          <span className="text-xs text-slate-500">Age Groups:</span>
          {organization.ageGroups.map((ageGroup) => (
            <span key={ageGroup} className="px-2 py-0.5 bg-slate-700/50 text-slate-300 rounded-lg text-xs font-medium border border-slate-600/50">{ageGroup}</span>
          ))}
        </div>
        <div className="flex items-center gap-2">
          <button type="button" className="px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-xl text-sm font-medium hover:shadow-lg hover:shadow-green-500/25 transition-all">
            Contact Organization
          </button>
          <button
            type="button"
            onClick={onToggleSaved}
            className={`px-4 py-2 rounded-xl text-sm font-medium border transition-all ${
              saved
                ? 'bg-amber-500/15 text-amber-400 border-amber-500/30'
                : 'bg-slate-700/50 text-slate-300 border-slate-600/50 hover:border-amber-500/30'
            }`}
          >
            {saved ? 'Saved' : 'Save'}
          </button>
        </div>
      </div>
    </div>
  );
}
