'use client';

import { AlertDialog, AlertDialogContent, AlertDialogTitle } from '@/components/ui/alert-dialog';
import { Chip } from '@/components/ui/chip';
import IconFont from '@/components/ui/iconFont';
import Link from 'next/link';
import { useState } from 'react';

type StoryDialogProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
};
export default function StoryDialog({ open, onOpenChange }: StoryDialogProps) {
  const tags = [
    {
      label: 'CEO',
      value: 'ceo',
    },
    {
      label: 'Contract',
      value: 'contract',
    },
    {
      label: 'Lover',
      value: 'lover',
    },
    {
      label: 'Bossy',
      value: 'bossy',
    },
    {
      label: 'Billionaire',
      value: 'billionaire',
    },
  ];

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent className="max-w-[760px]">
        <AlertDialogTitle></AlertDialogTitle>
        <div className="txt-title-l my-6 text-txt-primary-normal text-center">
          The Bossy CEO’s Contract Lover
        </div>
        <div className="flex items-center gap-2">
          {tags.map((tag) => (
            <Chip key={tag.value}># {tag.label}</Chip>
          ))}
        </div>
        <div className="p-5 rounded-2xl mt-4 txt-label-m text-txt-tertiary-normal bg-[#403E57]">
          In an era where memories can be digitally extracted and traded, Chen Mo is the most elite
          "memory trader" on the black market. He deals in sweet first loves and moments of triumph,
          but also handles guilty memories too dark to see the light. One day, he takes on a memory
          file from a suicide victim. Inside, he sees his own face—holding the murder weapon. At the
          same time, city-wide alarms sound because of him, and the memory agents known as
          "Silencers"... have locked onto his location. To uncover the truth, he must delve into
          this fatal memory...
        </div>
        <div className="flex items-center mt-6 justify-between">
          <span className="txt-title-m">All Characters</span>
          <Link href="/create/group">
            <div className="text-primary-normal cursor-pointer flex items-center gap-2">
              <IconFont type="icon-qunliao" className="text-2xl" />
              Group Chat
            </div>
          </Link>
        </div>
      </AlertDialogContent>
    </AlertDialog>
  );
}