"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Empty, EmptyHeader, EmptyTitle } from "@/components/ui/empty";
import { EmptyDescription, EmptyMedia }   from "@/components/ui/empty";
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Search, RefreshCw, ExternalLink, Clock, Newspaper } from "lucide-react";
import Link from 'next/link';

import type { News } from "@/generated/prisma/client";

export function FeedContent({
  newsItems,
}: {
  newsItems: News[],
}) {
  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Market News</h1>
          <p className="text-muted-foreground">Stay updated with the latest market news</p>
        </div>
        {/* <Button variant="outline">
          <RefreshCw className="mr-2 h-4 w-4" />
          Refresh Feed
        </Button> */}
      </div>

      {newsItems.length < 1 ? (
        <Empty className="mt-20">
          <EmptyMedia variant="icon"><Newspaper /></EmptyMedia>
          <EmptyHeader>
            <EmptyTitle>No news available</EmptyTitle>
            <EmptyDescription>This place is empty. Please check back later.</EmptyDescription>
          </EmptyHeader>
        </Empty>
      ) : (
        <div className="grid gap-6 md:grid-cols-2">
          {newsItems.map((item) => (
            <Card key={item.id} className="overflow-hidden hover:shadow-lg transition-shadow">
              <div className="aspect-video w-full overflow-hidden bg-muted">
                <img src={item.image || "/placeholder.svg"} alt={item.title} className="object-cover w-full h-full" />
              </div>
              <CardHeader>
                {/* <div className="flex items-center gap-2 mb-2">
                  <Badge variant="outline" className="capitalize">
                    {item.category}
                  </Badge>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Clock className="mr-1 h-3 w-3" />
                    {item.time}
                  </div>
                </div> */}
                <CardTitle className="text-xl leading-tight">{item.title}</CardTitle>
                {/* <CardDescription className="text-sm">{item.source}</CardDescription> */}
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">{item?.excerpt ?? ''}</p>
                <Link href={item.url} className="p-0 h-auto">
                  Read now
                  <ExternalLink className="ml-1 h-3 w-3" />
                </Link>
              </CardContent>
            </Card>
          ))}
        </div>

        // <div className="flex justify-center">
        //   <Button variant="outline" size="lg">
        //     Load More Articles
        //   </Button>
        // </div>
      )}
    </div>
  )
}