import Image from "next/image";
import { useLocale } from "next-intl";
import { Link } from "@/lib/i18n/navigation";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { formatDate, estimateReadTime } from "@/lib/db/posts";
import type { FlatPost } from "@/lib/types";
import { cn } from "@/lib/utils";

interface PostCardProps {
  post: FlatPost;
  view?: "grid" | "list";
  categoryLabel?: string;
}

export function PostCard({ post, view = "grid", categoryLabel }: PostCardProps) {
  const locale = useLocale();
  const readTime = post.body ? estimateReadTime(post.body) : null;

  if (view === "list") {
    return (
      <Link href={`/writing/${post.slug}`} className="group block">
        <div className="flex items-start justify-between gap-4 border-b border-border py-5 hover:border-accent/30 transition-colors">
          <div className="flex-1 min-w-0">
            <div className="mb-2 flex flex-wrap items-center gap-2">
              <Badge variant="default" className="shrink-0">
                {categoryLabel ?? post.category}
              </Badge>
              <span className="font-mono text-xs text-text-secondary">
                {formatDate(post.publishedAt, locale)}
              </span>
            </div>
            <h3 className="text-base font-semibold text-text-primary group-hover:text-accent transition-colors line-clamp-2">
              {post.title}
            </h3>
            {post.excerpt && (
              <p className="mt-1 text-sm text-text-secondary line-clamp-2">{post.excerpt}</p>
            )}
          </div>
          {readTime && (
            <span className="shrink-0 font-mono text-xs text-text-secondary mt-1">
              {readTime} دقیقه
            </span>
          )}
        </div>
      </Link>
    );
  }

  return (
    <Link href={`/writing/${post.slug}`} className="group block h-full">
      <Card className="h-full overflow-hidden">
        {post.coverImage && (
          <div className="relative h-44 overflow-hidden">
            <Image
              src={post.coverImage}
              alt={post.title}
              fill
              className="object-cover transition-transform duration-300 group-hover:scale-105"
            />
          </div>
        )}
        <CardContent className={cn("p-5", !post.coverImage && "pt-5")}>
          <div className="mb-3 flex items-center gap-2">
            <Badge variant="default">{categoryLabel ?? post.category}</Badge>
            <span className="font-mono text-xs text-text-secondary">
              {formatDate(post.publishedAt, locale)}
            </span>
          </div>
          <h3 className="mb-2 text-base font-semibold text-text-primary group-hover:text-accent transition-colors line-clamp-2">
            {post.title}
          </h3>
          {post.excerpt && (
            <p className="text-sm text-text-secondary line-clamp-3">{post.excerpt}</p>
          )}
          {readTime && (
            <div className="mt-4 font-mono text-xs text-text-secondary">
              {readTime} دقیقه مطالعه
            </div>
          )}
        </CardContent>
      </Card>
    </Link>
  );
}
