import { Box } from "@/components/ui/box";
import { Button, ButtonText } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Heading } from "@/components/ui/heading";
import { Image } from "@/components/ui/image";
import { Text } from "@/components/ui/text";
import { VStack } from "@/components/ui/vstack";
import { Icon, FavouriteIcon } from "@/components/ui/icon";

export default function NoticeCard() {
  return (        
        <Card className="p-5 rounded-lg max-w-[360px] m-3">
          <Image
            source={{
              uri: 'https://gluestack.github.io/public-blog-video-assets/saree.png',
            }}
            className="mb-6 h-[240px] w-full rounded-md aspect-[4/3]"
            alt="image"
          />
          <Text
            className="text-sm font-normal mb-2 text-typography-700"
          >
            Fashion Clothing
          </Text>
          <VStack className="mb-6">
            <Heading size="md" className="mb-2">
              Cotton Kurta
            </Heading>
          </VStack>
          <Box
            className="flex-row"
          >
            <Button
              className="px-4 py-2 mr-3 mb-0 flex-1"
            >
              <ButtonText size="sm">See more</ButtonText>
            </Button>
               <Icon as={FavouriteIcon} size="xl" className="text-typography-500 m-2 w-7 h-7" />
          </Box>
        </Card>
    );
}

