"use client"

import * as React from "react"
import { Expand, LinkIcon, Store, StoreIcon } from "lucide-react"

import { useParams, useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar"
import IconButton from "./ui/icon-button"
import Link from "next/link"
import { Badge } from "./ui/badge"


interface StoreListProps {
  items: Record<string, any>[];
}

export default function StoreList({ items = [] }: StoreListProps) {
  const params = useParams();
  const router = useRouter();

  const formattedItems = items.map((item) => ({
    label: item.name,
    value: item.id,
    shopUrl: item.shopUrl
  }));

  const onStoreSelect = (store: { value: string, label: string }) => {
    router.push(`/${store.value}`);
  };


  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
      {
        formattedItems.map((store) => (
          <div key={store.value}
            className="relative group m-0">
            <div className="absolute z-10 right-0 top-0 opacity-0 group-hover:opacity-100 transition w-fit ">
              <div className="flex gap-x-6 justify-center">
                <Link href={'http://' + store.label + '.com/'} target="_blank" rel="noopener noreferrer">
                  <IconButton
                    icon={<LinkIcon size={20} className="text-zinc-600" />}
                  />
                </Link>
              </div>
            </div>
            <Card
              onClick={() => onStoreSelect(store)}
              className="relative group cursor-pointer hover:shadow-lg dark:hover:bg-zinc-900 m-2"
            >

              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="inline-flex space-x-2 items-center">
                  <Avatar className="h-8 w-8 text-sm">
                    {/*<AvatarImage src="/avatars/01.png" alt="Avatar ProjOctopus" />*/}
                    <AvatarFallback>{store.label?.[0]}</AvatarFallback>
                  </Avatar>
                  <div className="flex flex-col">
                    <div className="text-md font-medium">
                      {store.label}
                    </div>
                    <div className="text-sm font-normal lowercase">
                      {store.shopUrl}
                    </div>
                  </div>
                </CardTitle>
                {/*<div className="">
                                    <Badge variant="destructive">3 notifications</Badge>
                                </div>*/}
                <StoreIcon className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent className="inline-flex space-x-2 mt-2">
                <div className="thumbnail-container border rounded-lg w-52 h-32">
                  <div className="thumbnail">
                    <iframe src={`https://${store.shopUrl}`} loading="lazy"></iframe>
                  </div>
                </div>
                <div className="">
                  description
                </div>
              </CardContent>
            </Card>
          </div>
        ))
      }
    </div >
  );
};