import React, { useCallback } from 'react';
import { Organization } from '@/types.ts';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
import { useTranslation } from '@/hooks/useI18n.tsx';

const SimilarOrgItem = React.memo(
  ({ org, onSelectOrg }: { org: Organization; onSelectOrg: (org: Organization) => void }) => {
    const handleSelect = useCallback(() => {
      onSelectOrg(org);
    }, [onSelectOrg, org]);

    return (
      <li>
        <button
          onClick={handleSelect}
          className="text-left w-full p-3 rounded-lg bg-background hover:bg-muted transition-colors border hover:border-primary/20 hover:shadow-sm"
        >
          <p className="font-medium">{org.Name}</p>
          <p className="text-sm text-muted-foreground line-clamp-2">{org.Description}</p>
        </button>
      </li>
    );
  }
);
SimilarOrgItem.displayName = 'SimilarOrgItem';

const SimilarOrganizations = ({
  organizations,
  onSelectOrg,
}: {
  organizations: Organization[];
  onSelectOrg: (org: Organization) => void;
}) => {
  const { t } = useTranslation();
  if (!organizations || organizations.length === 0) return null;
  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('similarOrganizations.title')}</CardTitle>
      </CardHeader>
      <CardContent>
        <ul className="space-y-3 -mt-4">
          {organizations.map((org) => (
            <SimilarOrgItem key={org.ID} org={org} onSelectOrg={onSelectOrg} />
          ))}
        </ul>
      </CardContent>
    </Card>
  );
};

export default React.memo(SimilarOrganizations);