"use client";

import {
  Clapperboard,
  Music,
  Pause,
  Scissors,
  Subtitles,
  Type,
} from "lucide-react";
import { useTranslations } from "next-intl";

export function VideoMakerEditorPreview() {
  const t = useTranslations("auto.componentsVideoMakerVideoMakerEditorPreview");
  const layers = [
    t("layerIntroTitle"),
    t("layerBrollClip"),
    t("layerBackgroundMusic"),
    t("layerCaptions"),
  ];
  return (
    <div
      className="overflow-hidden rounded-xl border border-gray-100 bg-white shadow-xl"
      aria-hidden
    >
      <div className="flex items-center justify-between border-b border-gray-100 bg-neutral-50 px-4 py-3">
        <div className="flex items-center gap-2">
          <span className="h-3 w-3 rounded-full bg-red-400" />
          <span className="h-3 w-3 rounded-full bg-amber-400" />
          <span className="h-3 w-3 rounded-full bg-green-400" />
        </div>
        <span className="text-xs font-medium text-neutral-500">
          {t("appBarTitle")}
        </span>
        <Clapperboard className="h-4 w-4 text-primary-600" />
      </div>

      <div className="grid gap-0 lg:grid-cols-[1fr_220px]">
        <div className="border-r border-gray-100 p-4">
          <div className="relative aspect-video overflow-hidden rounded-lg bg-gradient-to-br from-primary-900 via-primary-700 to-primary-500">
            <div className="absolute inset-0 flex items-center justify-center">
              <span className="flex h-14 w-14 items-center justify-center rounded-full bg-white/20 backdrop-blur-sm">
                <Pause className="h-6 w-6 text-white" />
              </span>
            </div>
            <div className="absolute bottom-3 left-3 right-3 rounded-md bg-black/40 px-3 py-2 text-xs text-white backdrop-blur-sm">
              {t("sceneCaption")}
            </div>
          </div>

          <div className="mt-4 flex gap-2">
            {[Type, Subtitles, Music, Scissors].map((Icon, index) => (
              <div
                key={index}
                className="flex h-9 w-9 items-center justify-center rounded-lg border border-gray-100 bg-neutral-50 text-neutral-600"
              >
                <Icon className="h-4 w-4" />
              </div>
            ))}
          </div>

          <div className="mt-4 space-y-2">
            <div className="h-2 w-full rounded-full bg-neutral-100">
              <div className="h-2 w-2/3 rounded-full bg-primary-600" />
            </div>
            <div className="flex gap-2">
              {[
                "opacity-40",
                "opacity-70",
                "opacity-30",
                "opacity-80",
                "opacity-55",
              ].map((opacityClass, index) => (
                <div
                  key={index}
                  className={`h-8 flex-1 rounded-md bg-primary-100 ${opacityClass}`}
                />
              ))}
            </div>
          </div>
        </div>

        <div className="hidden bg-neutral-50 p-4 lg:block">
          <p className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
            {t("layersHeading")}
          </p>
          <ul className="mt-3 space-y-2">
            {layers.map(
              (layer) => (
                <li
                  key={layer}
                  className="rounded-lg border border-gray-100 bg-white px-3 py-2 text-xs text-neutral-700"
                >
                  {layer}
                </li>
              )
            )}
          </ul>
        </div>
      </div>
    </div>
  );
}
