import { DescriptionCard } from "@tailor-platform/app-shell";
import { graphql, type FragmentOf, readFragment } from "@/graphql";

export const AttributeDetailFragment = graphql(`
  fragment AttributeDetail on ProductAttribute {
    id
    name
    code
    createdAt
    updatedAt
    productAttributeValues {
      edges {
        node {
          id
          label
        }
      }
    }
  }
`);

interface AttributeDetailProps {
  attribute: FragmentOf<typeof AttributeDetailFragment>;
}

export const AttributeDetail = ({ attribute: attributeFragment }: AttributeDetailProps) => {
  const attribute = readFragment(AttributeDetailFragment, attributeFragment);

  const valueLabels = attribute.productAttributeValues?.edges?.map((e) => e.node.label) ?? [];

  return (
    <DescriptionCard
      data={{ ...attribute, valueLabels }}
      title="Attribute Information"
      columns={3}
      fields={[
        { key: "name", label: "Name" },
        { key: "code", label: "Code", meta: { copyable: true } },
        {
          key: "valueLabels",
          label: "Values",
          type: "badge",
          meta: { sentenceCaseBadges: false, maxVisible: 10 },
        },
        { type: "divider" },
        {
          key: "createdAt",
          label: "Created At",
          type: "date",
          meta: { dateFormat: "medium" },
        },
        {
          key: "updatedAt",
          label: "Updated At",
          type: "date",
          meta: { dateFormat: "relative" },
        },
      ]}
    />
  );
};
