"use client";

import { motion } from "framer-motion";

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

interface BlogPost7Props {
  title: string;
  image: string;
  description: string;
  topNote: string;
  author: {
    name: string;
    image: string;
    description: string;
  };
  secondaryDescription: string;
  className?: string;
}

const formatPersianDate = (date: Date) =>
  new Intl.DateTimeFormat("fa-IR", {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(date);

const Blogpost7 = ({
  title = "طراحی پایدار در عصر دیجیتال",
  description =
    "چرا رویه‌های مسئولانه زیست‌محیطی در محصولات دیجیتال برای آینده فناوری اهمیت دارد.",
  image = "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
  topNote = formatPersianDate(new Date("2025-01-22")),
  author = {
    name: "سارا احمدی",
    image: "/block-media/shadcnblocks/block/avatar-1.webp",
    description: "مهندس ارشد نرم‌افزار",
  },
  secondaryDescription =
    "ما با طراحی و توسعه محصولات دیجیتال، ایده‌ها را به راهکارهایی کاربردی، مقیاس‌پذیر و ماندگار تبدیل می‌کنیم.",
  className,
}: BlogPost7Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "grid min-h-lvh gap-10 p-6 md:grid-cols-2 lg:gap-20",
        className,
      )}
    >
      <div className="h-full overflow-hidden rounded-xl">
        <img
          src={image}
          alt={title}
          className="h-full w-full object-cover object-center"
        />
      </div>
      <div className="grid items-center">
        <div className="flex max-w-lg flex-col gap-10 text-start">
          <motion.div
            initial={{ opacity: 0, y: 60 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            viewport={{ once: true }}
            className="text-xs text-muted-foreground xl:text-base"
          >
            {topNote}
          </motion.div>
          <motion.h1
            initial={{ opacity: 0, y: 60 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="text-xl font-bold md:text-2xll"
          >
            {title}
          </motion.h1>
          <motion.div
            initial={{ opacity: 0, y: 60 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            viewport={{ once: true }}
            className="text-xs font-medium text-muted-foreground lg:text-base"
          >
            {description}
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 60 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            viewport={{ once: true }}
            className="flex gap-4"
          >
            <Avatar className="size-14 border">
              <AvatarImage src={author.image} alt={author.name} />
            </Avatar>
            <div>
              <h2 className="font-semibold xl:text-lg">{author.name}</h2>
              <p className="font-medium text-muted-foreground xl:text-lg">
                {author.description}
              </p>
            </div>
          </motion.div>

          <Separator />
          <motion.div
            initial={{ opacity: 0, y: 60 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            viewport={{ once: true }}
          >
            <p className="text-3xl font-medium">{secondaryDescription}</p>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

export { Blogpost7 };