'use client';

import { TimeFormatter } from '@/lib/formatters/TimeFormatter';
import { Button } from '@/ui/Button';
import { FeedItem } from '@/ui/FeedItem';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { useEffect, useState } from 'react';

interface FeedItemData {
  id: string;
  type: string;
  headline: string;
  body?: string;
  timestamp: string;
  formattedTime: string;
  ctaHref?: string;
  ctaLabel?: string;
}

async function resolveActor() {
  return null;
}

interface FeedItemCardProps {
  item: FeedItemData;
}

export function FeedItemCard({ item }: FeedItemCardProps) {
  const [actor, setActor] = useState<{ name: string; avatarUrl: string } | null>(null);

  useEffect(() => {
    let cancelled = false;

    void (async () => {
      const resolved = await resolveActor();
      if (!cancelled) {
        setActor(resolved);
      }
    })();

    return () => {
      cancelled = true;
    };
  }, [item]);

  return (
    <FeedItem
      user={{
        name: actor?.name || 'Unknown',
        avatar: actor?.avatarUrl
      }}
      timestamp={TimeFormatter.timeAgo(item.timestamp)}
      content={
        <Stack gap={2}>
          <Text weight="bold" variant="high">{item.headline}</Text>
          {item.body && <Text variant="med">{item.body}</Text>}
        </Stack>
      }
      actions={item.ctaHref && item.ctaLabel ? (
        <Button
          as="a"
          href={item.ctaHref}
          variant="secondary"
          size="sm"
        >
          {item.ctaLabel}
        </Button>
      ) : undefined}
    />
  );
}