'use server';

import React from 'react';

import Link from 'next/link';

import { AccountWithParams } from '@/packages/features/accounts/src/types/accounts';
import { pathsConfig } from '@/packages/shared/src/config';
import { ChevronRight } from 'lucide-react';

import { Trans } from '@kit/ui/makerkit/trans';
import { Button } from '@kit/ui/shadcn/button';
import { Card, CardHeader } from '@kit/ui/shadcn/card';

import { loadLifeStyle } from '../../_lib/server/load-life-style';

const LifeStyleCard = async ({ account }: { account: AccountWithParams }) => {
  const data = await loadLifeStyle(account);

  return (
    <Card variant="gradient-success" className="flex flex-col justify-between">
      <CardHeader className="flex-row justify-between">
        <h5>
          <Trans i18nKey="dashboard:heroCard.lifeStyle.title" />
        </h5>
        <Link href={pathsConfig.app.lifeStyle}>
          <Button size="icon" variant="outline" className="px-2 text-black">
            <ChevronRight className="size-4 stroke-2" />
          </Button>
        </Link>
      </CardHeader>
      <span className="text-primary p-4 text-sm">{data.summary}</span>
    </Card>
  );
};

export default LifeStyleCard;