import { ArrowRight, FileText } from "lucide-react";

import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const posts = [
  {
    title: "چگونه برند و کسب‌وکار موفقی آنلاین بسازیم",
    summary:
      "راهکارهای عملی برای ساخت هویت برند قوی و رشد پایدار کسب‌وکار در فضای دیجیتال امروز.",
    author: "علی رضایی",
    readTime: "۱۰ دقیقه مطالعه",
    image:
      "/block-media/external/unsplash/photo-1536735561749-fc87494598cb.jpg",
    avatar: "/block-media/shadcnblocks/block/avatar-4.webp",
    href: "#",
  },
  {
    title: "تفاوت رابط کاربری و تجربه کاربری و چگونه برای هر دو طراحی کنیم",
    summary:
      "تفاوت‌های کلیدی UI و UX و نکاتی برای طراحی تجربه‌ای هماهنگ و کاربرمحور.",
    author: "سارا احمدی",
    readTime: "۱۴ دقیقه مطالعه",
    image:
      "/block-media/external/unsplash/photo-1653288973812-81d1951b8127.jpg",
    avatar: "/block-media/shadcnblocks/block/avatar-1.webp",
    href: "#",
  },
  {
    title: "بهینه‌سازی وب‌سایت برای سئو و افزایش ترافیک",
    summary:
      "تکنیک‌های سئو که دیده‌شدن سایت شما را بهبود می‌دهد و ترافیک ارگانیک را افزایش می‌دهد.",
    author: "مریم حسینی",
    readTime: "۹ دقیقه مطالعه",
    image:
      "/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg",
    avatar: "/block-media/shadcnblocks/block/avatar-3.webp",
    href: "#",
  },
];

interface Blog12Props {
  className?: string;
}

const Blog12 = ({ className }: Blog12Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-4 text-center">
          <Badge variant="outline" className="gap-1 py-1">
            <FileText className="h-full w-4" />
            وبلاگ ما
          </Badge>
          <h1 className="text-xl font-semibold text-balance">
            جدیدترین روندها را کشف کنید
          </h1>
          <p className="text-muted-foreground">
            در وبلاگ ما جدیدترین مقالات، آموزش‌ها و ایده‌های کاربردی را برای رشد کسب‌وکار و توسعه مهارت‌های خود دنبال کنید.
                                </p>
        </div>
        <div className="mt-20 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {posts.map((post) => (
            <a
              key={post.title}
              className="rounded-xl border"
              href={post.href}
            >
              <div className="p-2">
                <img
                  src={post.image}
                  alt={post.title}
                  className="aspect-video w-full rounded-lg object-cover"
                />
              </div>
              <div className="px-3 pt-2 pb-4 text-start">
                <h2 className="mb-1 font-medium">{post.title}</h2>
                <p className="line-clamp-2 text-sm text-muted-foreground">
                  {post.summary}
                </p>
                <Separator className="my-5" />
                <div className="flex items-center justify-between gap-4">
                  <div className="flex items-center gap-3">
                    <Avatar className="size-9 rounded-full ring-1 ring-input">
                      <AvatarImage src={post.avatar} alt={post.author} />
                    </Avatar>
                    <span className="text-sm font-medium">{post.author}</span>
                  </div>
                  <Badge variant="secondary" className="h-fit shrink-0">
                    {post.readTime}
                  </Badge>
                </div>
              </div>
            </a>
          ))}
        </div>
        <div className="mt-10 flex justify-center">
          <Button variant="outline">
            مشاهده همه مطالب
            <ArrowRight className="ms-2 h-full w-4 rtl:rotate-180" />
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Blog12 };