import { __ } from "@wordpress/i18n";
import { useOutletContext } from "react-router-dom";

import { Separator } from "@/components/ui/separator";

import { Box } from "@/components/box";
import { CalendarBlock } from "@/components/calendar/calendar-block";
import { CalendarFeed } from "@/components/calendar/calendar-feed";
import { CalendarLink } from "@/components/calendar/calendar-link";
import { CalendarShortcode } from "@/components/calendar/calendar-shortcode";
import { Heading } from "@/components/heading";
import { Panel } from "@/components/panel";

export function CalendarEditEmbed() {
  const [calendar, setCalendar] = useOutletContext();

  return (
    <Box>
      <div className="grid w-full">
        <Panel variant="header">
          <Heading level={3}>{__("Embed", "eventkoi-lite")}</Heading>
        </Panel>
        <Separator />
        <div className="flex flex-col px-6 py-8 w-full gap-10">
          <CalendarLink calendar={calendar} setCalendar={setCalendar} />
          <CalendarFeed calendar={calendar} />
          <CalendarShortcode calendar={calendar} setCalendar={setCalendar} />
          <CalendarBlock calendar={calendar} setCalendar={setCalendar} />
        </div>
      </div>
    </Box>
  );
}
