import Button from '@/components/ui/Button.tsx';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';
import { EmptyState } from '@/components/ui/EmptyState.tsx';
import { Flex, Grid } from '@/components/ui/layout';
import { Briefcase } from 'lucide-react';

type Org = any;

type Props = {
  organizations: Org[] | null | undefined;
  onNavigate: (path: string) => void;
  t: (key: string) => string;
};

const MyOrganizationsSection = ({ organizations, onNavigate, t }: Props) => {
  return (
    <Card>
      <CardHeader>
        <Flex align="center" justify="between">
          <CardTitle>{t('dashboard.myOrganizations')}</CardTitle>
          {organizations && organizations.length > 0 && (
            <Button variant="outline" size="sm" onClick={() => onNavigate('/organizations')}>
              {t('dashboard.viewAll')}
            </Button>
          )}
        </Flex>
      </CardHeader>
      <CardContent>
        {organizations && organizations.length > 0 ? (
          <Grid cols={{ sm: 2, md: 3 }} gap="md">
            {organizations.slice(0, 3).map((org: any) => (
              <div
                key={org.ID}
                className="p-4 border rounded-lg hover:bg-muted/50 cursor-pointer transition-colors"
                onClick={() => onNavigate(`/organization/${org.ID}`)}
              >
                <h4 className="mb-1 font-semibold">{org.Name}</h4>
                <div className="text-sm text-muted-foreground mb-2">{org.sector}</div>
                <div className="text-xs">
                  <span className="inline-block rounded px-2 py-1 border">{org.subtype}</span>
                </div>
              </div>
            ))}
          </Grid>
        ) : (
          <EmptyState
            type="no-data"
            icon={<Briefcase className="h-12 w-12 opacity-50" />}
            title={t('dashboard.noOrganizationsTitle')}
            description={t('dashboard.noOrganizationsDesc')}
            action={{
              label: t('dashboard.createFirstOrganization'),
              onClick: () => onNavigate('/map'),
            }}
          />
        )}
      </CardContent>
    </Card>
  );
};

export default MyOrganizationsSection;