"use client";

import { Check } from "lucide-react";
import React from "react";
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";

import { Cover } from "@/components/shadcnblocks/cover";
import { Button } from "@/components/ui/button";
import type { ChartConfig } from "@/components/ui/chart";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import { formatDateLabel } from "@/lib/to-date-input";
import { cn } from "@/lib/utils";

interface Hero242Props {
  className?: string;
}

const Hero242 = ({ className }: Hero242Props) => {
  const features = [
    {
      title: "توسعه سریع‌تر",
      description: "ساخت و انتشار ویژگی‌ها با بلاک‌های ما بسیار سریع‌تر است.",
    },
    {
      title: "کاهش چشمگیر زمان توسعه",
      description: "از فاز طراحی بگذرید و روی رشد کسب‌وکار تمرکز کنید.",
    },
    {
      title: "بیش از ۷۰۰ کامپوننت آماده",
      description: "دسترسی به بلاک‌های آماده تولید برای هر کاربرد.",
    },
    {
      title: "پشتیبانی تخصصی",
      description: "دسترسی فوری به بلاک‌هایی که با شما مقیاس می‌گیرند.",
    },
    {
      title: "کامپوننت‌های بهینه برای تبدیل",
      description: "بلاک‌هایی طراحی‌شده برای تبدیل بازدیدکننده به مشتری.",
    },
  ];

  const chartData = [
    { date: "2024-04-01", views: 372 },
    { date: "2024-04-02", views: 277 },
    { date: "2024-04-03", views: 287 },
    { date: "2024-04-04", views: 502 },
    { date: "2024-04-05", views: 663 },
    { date: "2024-04-06", views: 641 },
    { date: "2024-04-07", views: 425 },
    { date: "2024-04-08", views: 729 },
    { date: "2024-04-09", views: 169 },
    { date: "2024-04-10", views: 451 },
    { date: "2024-04-11", views: 677 },
    { date: "2024-04-12", views: 502 },
    { date: "2024-04-13", views: 722 },
    { date: "2024-04-14", views: 357 },
    { date: "2024-04-15", views: 290 },
    { date: "2024-04-16", views: 328 },
    { date: "2024-04-17", views: 806 },
    { date: "2024-04-18", views: 774 },
    { date: "2024-04-19", views: 423 },
    { date: "2024-04-20", views: 239 },
    { date: "2024-04-21", views: 337 },
    { date: "2024-04-22", views: 394 },
    { date: "2024-04-23", views: 368 },
    { date: "2024-04-24", views: 677 },
    { date: "2024-04-25", views: 465 },
    { date: "2024-04-26", views: 205 },
    { date: "2024-04-27", views: 803 },
    { date: "2024-04-28", views: 302 },
    { date: "2024-04-29", views: 555 },
    { date: "2024-04-30", views: 834 },
    { date: "2024-05-01", views: 385 },
    { date: "2024-05-02", views: 603 },
    { date: "2024-05-03", views: 437 },
    { date: "2024-05-04", views: 805 },
    { date: "2024-05-05", views: 871 },
    { date: "2024-05-06", views: 1018 },
    { date: "2024-05-07", views: 688 },
    { date: "2024-05-08", views: 359 },
    { date: "2024-05-09", views: 407 },
  ];

  const chartConfig = {
    views: {
      label: "بازدید صفحه",
      color: "var(--chart-2)",
    },
  } satisfies ChartConfig;

  return (
    <section
      className={cn("relative h-full w-full overflow-hidden py-32", className)}
    >
      <div className="container grid min-w-0 grid-cols-1 gap-8 lg:grid-cols-2">
        <div className="w-full min-w-0 space-y-5">
          <h1 className="mt-3 w-full max-w-2xl text-balance text-2xll font-medium font-semibold tracking-tighter lg:text-2xll">
            اشتراکی برای رشد <Cover>رشد</Cover> شما
          </h1>

          <p className="max-w-xl text-balance text-muted-foreground">
            به هزاران توسعه‌دهنده و تیم محصول بپیوندید که با استفاده از این کامپوننت‌ها، توسعه محصولات خود را سریع‌تر و ساده‌تر کرده‌اند.
          </p>

          <div className="mt-10 mb-29 flex min-w-0 flex-wrap gap-2">
            <Button className="h-10 rounded-2xl">شروع رایگان</Button>
            <Button variant="secondary" className="h-10 rounded-2xl">
              مشاهده مخزن مخزن کد
            </Button>
          </div>
          <ul className="space-y-4">
            <li className="mb-3">
              <p className="font-semibold tracking-tight opacity-50">
                چگونه به رشد شما کمک می‌کنیم
              </p>
            </li>
            {features.map((feature) => (
              <li key={feature.title} className="flex min-w-0 gap-4 lg:items-center">
                <Check className="mt-1 size-4 shrink-0" />
                <p className="min-w-0 text-balance font-medium tracking-tight">
                  {feature.title}
                  <span className="ps-2 opacity-30">{feature.description}</span>
                </p>
              </li>
            ))}
          </ul>
        </div>
        <div className="h-full min-h-0 w-full min-w-0 overflow-hidden rounded-2xl bg-muted p-6">
          <ChartContainer config={chartConfig} className="h-full w-full min-w-0">
            <BarChart
              accessibilityLayer
              data={chartData}
              margin={{
                left: 12,
                right: 12,
              }}
            >
              <CartesianGrid vertical={false} />
              <XAxis
                dataKey="date"
                tickLine={false}
                axisLine={false}
                tickMargin={8}
                minTickGap={32}
                tickFormatter={(value) =>
                  formatDateLabel(value, "en-US", {
                    month: "short",
                    day: "numeric",
                  })
                }
              />
              <ChartTooltip
                content={
                  <ChartTooltipContent
                    className="w-[150px]"
                    nameKey="views"
                    labelFormatter={(value) =>
                      formatDateLabel(value, "en-US", {
                        month: "short",
                        day: "numeric",
                        year: "numeric",
                      })
                    }
                  />
                }
              />
              <Bar dataKey="views" fill="var(--chart-1)" />
            </BarChart>
          </ChartContainer>
        </div>
      </div>
    </section>
  );
};

export { Hero242 };