import { User } from 'lucide-react';
import React from 'react';
import { Organization } from '@/types.ts';
import { ExternalLink } from 'lucide-react';
import ContactInfoLine from '@/components/organization/ContactInfoLine.tsx';

interface ContactDetailsProps {
  organization: Organization;
}

const ContactDetails = ({ organization }: ContactDetailsProps) => {
  return (
    <div className="space-y-3 text-base">
      {organization.Website && (
        <ContactInfoLine
          icon={<ExternalLink className="h-4 text-current text-muted-foreground w-4" />}
          href={organization.Website}
        >
          {organization.Website.replace(/^(https?:\/\/)?(www\.)?/, '')}
        </ContactInfoLine>
      )}
      {organization.Address && (
        <ContactInfoLine icon={<User className="h-4 w-4 text-muted-foreground" />}>
          <span className="text-muted-foreground">{organization.Address}</span>
        </ContactInfoLine>
      )}
    </div>
  );
};

export default React.memo(ContactDetails);